【笔记】React的路由

发表于 分类于 阅读次数：

前言

A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.（官网）

React通过remix-run/react-router实现路由

下载依赖

1
npm install react-router-dom@6

定义根组件并配置路由

src/components/Home.jsx
1
2
3
import React from "react"

class Home extends React.Component {}
src/App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react"
import Home from "./components/Home"
import { Routes, Route } from "react-router-dom"

class App extends React.Component {
  render() {
    return (
      <>
        <header></header>
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
        </main>
        <footer></footer>
      </>
    );
  }
}

export default App;

开启路由并挂载根组件

Hash模式

src/index.js
1
2
3
4
5
6
7
8
9
10
import { ReactDOM } from "react-dom/client"
import App from "./App"
import { HashRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

History模式

src/index.js
1
2
3
4
5
6
7
8
9
10
import { ReactDOM } from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

跳转路由

Link组件

replace：是否是Replace操作

false：缺省值，Push操作，可以返回
true：Replace操作，不可以返回

src/components/Component.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react"
import { Link } from "react-router-dom"

class Component extends React.Component {
  render() {
    return (
      <>
        <Link to="/" replace={false}>首页</Link>
      </>
    );
  }
}

export default App;

完成