React Router 中文文档
react-router
docs–installation.md
react-router-dom
docs-tutorial.md
引入路由
依赖包分间接依赖包和直接依赖包
在pages目录中，创建路由组件
react-router—–Github
React Router中文文档
v6文档：https://reactrouter.com
v5文档：https://v5.reactrouter.com/web/guides/quick-start
最全前端路由配置、中大型后台前端配置，vue-router react-router
1
2
3
4
5
6
7
8
9
10
11
12
| // 入口文件index.js
import React from "react";
import ReactDOM from "react-dom"
import { BrowserRouter } from "react-router-dom";
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 应用的根组件App.js
import React, {Component} from "react";
import {Routes, Route } from "react-router-dom";
import "./App.less";
import Login from "./pages/login/Login";
import Admin from "./pages/admin/Admin";
export default class App extends Component {
render() {
return (
<Routes>
<Route path="/login" element={<Login />}></Route>
<Route path="/" element={<Admin />}></Route>
</Routes>
)
}
}
|
重定向
1
2
3
4
5
6
| import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}
|
编程式重定向
navigate要在useEffect中使用
1
2
3
4
5
6
7
| import React, {useEffect} from 'react'
useEffect(() => {
if(user.isLogin) {
navigate("/home");
}
}, [user]);
|
Navigation Function
使用layout的路由配置
参考-lazy-loading
关键点：Outlet
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
49
50
51
52
53
54
55
56
57
58
59
| import React, { useEffect} from 'react'
import { useSelector} from 'react-redux'
import { useNavigate } from "react-router-dom";
import { Routes, Route, Outlet } from "react-router-dom";
import { Layout} from 'antd';
import Top from '../../components/Top'
import Bottom from '../../components/Bottom'
import LeftNav from "../../components/LeftNav"
import Product from '../product/Product';
import AddProduct from '../product/AddProduct';
import EditProduct from '../product/EditProduct';
const { Content} = Layout;
export default function Container() {
return (
<Routes>
<Route path="/" element={<DashboardLayout />}>
<Route index element={<Product />} />
<Route path="add" element={<AddProduct />} />
<Route path="edit" element={<EditProduct />} />
</Route>
</Routes>
);
}
function DashboardLayout() {
let navigate = useNavigate();
const stateUser = useSelector(state => state.user);
const root = JSON.parse(localStorage.getItem('persist:root'));
const user = JSON.parse(root.user) || stateUser;
// 未登录
useEffect(() => {
if(!user.isLogin) {
navigate("/login");
}
}, [user]);
return (
<Layout className='container'>
<LeftNav/>
<Layout>
<Top user={user}/>
<Content style={{ margin: '24px 16px 0' }}>
<div className="site-layout-background content-box" style={{ padding: 24, minHeight: 850 }}>
<Outlet />
<Bottom/>
</div>
</Content>
</Layout>
</Layout>
)
}
|
