组件

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 (
        

            {/*导航栏*/}
            
            
{marginTop: 60}}>
                {/*匹配的路由显示*/}
                
                    }/>
                    }/>
                    }/>
                    }/>
                
            
        
    );
}

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 (
    

      
Dashboard

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

function App() {
  return (
    
      }>
        }
        />
        } />
      
    
  );
}
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：获取动态参数

}/>
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: ,
      children: [
        {
          path: "messages",
          element: ,
        },
        { path: "tasks", element:  },
      ],
    },
    { path: "team", element:  },
  ]);
  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'
// ...

1
2
3