winney

It is never too old to learn.

0%
winney

React Router笔记

发表于 更新于 分类于 ，

React Router 中文文档

react-router

docs–installation.md

react-router-dom

docs-tutorial.md

引入路由

依赖包分间接依赖包和直接依赖包

1
cnpm i react-router-dom

在pages目录中，创建路由组件

React Router—看这里的最新用法

react-router—–Github

React Router中文文档

react-router-dom使用指南

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>
  )
}