【React Router】快速使用

组件

index.js

import React from 'react';
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(
    // history 模式
    <BrowserRouter>
        <App />
    </BrowserRouter>
);
1
2
3
4
5
6
7
8
9
10
11
12
13

• BrowserRouter：整个前端路由以 history 模式开始，包裹根组件
• HashRouter：整个前端路由以 hash 模式开始，包裹根组件

import {Navigate, NavLink, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Add from "./components/Add";
import './css/App.css'

function App() {
    return (
        <div id="app" className="container">
            {/*导航栏*/}
            <nav className="navbar navbar-inverse navbar-fixed-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>
                        <div className="navbar-brand">学生管理系统</div>
                    </div>
                    <div id="navbar" className="collapse navbar-collapse">
                        <ul className="nav navbar-nav">
                            {/*路由跳转*/}
                            <NavLink to="/home" className="navigation">主页</NavLink>
                            <NavLink to="/about" className="navigation">关于我们</NavLink>
                        </ul>
                        <ul className="nav navbar-nav navbar-right">
                            <NavLink to="/add" className="navigation">添加用户</NavLink>
                        </ul>
                    </div>
                </div>
            </nav>
            <div style={{marginTop: 60}}>
                {/*匹配的路由显示*/}
                <Routes>
                    <Route path="/home" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                    <Route path="/add" element={<Add/>}/>
                    <Route path="/" element={<Navigate replace to="/home"/>}/>
                </Routes>
            </div>
        </div>
    );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

• Routes：提供上下文环境

• Route： 书写对应的路由和对应的组件

  • path：匹配的路由
  • element：匹配路由时要渲染的组件

• Navigate：重定向，类似于 useNavigate 的返回值函数，但这个是组件

• NavLink：和 Link 一样会被渲染为 a 标签，和 Link 的区别是他有一个名为 active 的激活样式，所以一般用于顶部或者左侧导航栏的跳转

• Outlet：相当于 Vue Router 的 router-view；需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置，children 对应一个数组，数组里是一个个路由

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Hooks

• useLocation：获取到 location 对象，location 对象中可以获取 state(其他路由跳转过来的时候会在state 里面传递额外的数据) 等的属性

const location = useLocation()
console.log(location.state)
1
2

• useNavigate：

const navigate = useNavigate()
// 这里路径必须是 /home 因为如果从 / -> /home 的话，/home 页的 location 并不会传递
navigate('/home', {
    state: {
        alert: '用户添加成功',
        type: 'success'
    }
})
1
2
3
4
5
6
7
8

• useParams：获取动态参数

<Route path="/detail/:id" element={<Detail />}/>
const {id} = useParams()
1
2

• useRoutes：类似于 Vue Router 声明路由的方式

import * as React from "react";
import { useRoutes } from "react-router-dom";

function Router() {
  const element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);
  return element;
}

export default Router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import RouterConfig from './router/router.jsx'
// ...
<RouterConfig />
1
2
3