react-router V6
1、React-router 的三个版本
1、React-router 服务端使用
2、React-router-dom 浏览器端使用
3、React-router-native React-native 混合开发使用
1
2
3
2、基本使用
基本使用步骤如下：
1、选择路由模式 history/hash 包裹在想要使用路由的组件外面
包裹的好处是灵活，谁用包裹谁
2、使用 Routes 组件 --- 路由出口
3、使用 Route 组件 --- 写在 Routes 里面(用来包裹具体路由规则)
4、使用 NavLink/Link 组件 --- 路由链接
1
2
3
4
5
6
2.1 选择路由模式
// 1、用哪包哪



// 2、用谁包谁



1
2
3
4
5
6
7
8
2.2 定义路由组件
在 src 新建文件夹 pages 里面用来放 路由组件
1
import '../App.css';

function Page1() {
return (

);
}

export default Page1;
1
2
3
4
5
6
7
8
9
10
11
2.3 路由出口以及配置路由规则
import './App.css';
// 1、引入路由组件 以及 Routes, Route
import {Routes, Route} from 'react-router-dom';
import Page1 from './pages/page1';
import Page2 from './pages/page2';
import Page3 from './pages/page3';
import Page4 from './pages/page4';

function App() {
return (

);
}

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
2.4 声明路由链接
1、NavLink 自带 active 类, 使用时需要在样式文件中添加 active 类
2、Link 普通的链接
1
2
// 引入
import {NavLink,Link} from 'react-router-dom';

// 使用 路由链接

// 添加 active 类
.active{
background-color: #61dafb;
border-radius: 20%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3、感受 react 全局插件 使用方式
1、与 vue 不同 ，react 中没有 vue.use 的方法
2、使用时，都是遵循 谁使用，包裹谁 的原则
1
2
4、嵌套路由 与 outLet
1、在当前 Route 组件下，在嵌套 Route 组件
2、使用 outLet 组件 在当前组件 注明 路由出口
3、在 当前组件 中 写路由链接 实现点击跳转
1
2
3
4.1 重新配置路由规则
// 引入子组件
import Son1 from './pages/page1Son/Son1';
import Son2 from './pages/page1Son/Son2';

}>
}>

1
2
3
4
5
6
7
8
4.2 使用 outLet 组件
import { Outlet } from 'react-router-dom';

1
2
3
4
5
6
7
4.3 实现点击跳转
import {Link} from 'react-router-dom';

1
2
3
4
5
6
5、动态路由 与 路由传参
1、动态路由就是配置路由时，路由规则的 path 是不固定的，往往携带着一些参数
2、react中常见的路由参数有以下几种
(1) params 参数 --类似于 get 请求
V5 this.props.match.params
V6 useParams
(2) query 参数 -- 类似于 get 请求
V5 this.props.location.search
V6 useSearchParams
(3) location信息 / state 参数 -- 参数通过 state 属性 传递(类似于 post 请求)
V5 this.props.location.state
V6 useLocation
1
2
3
4
5
6
7
8
9
10
11
5.1 params 参数
1、路由链接(携带参数)：
Page2
2、注册路由(声明接收)--加占位符：
}>
3、接收参数：
V5 this.props.match.params
V6 const parms = useParams()
1
2
3
4
5
6
7
import '../App.css';
import {useParams} from 'react-router-dom';

function Page2() {
// 接收 params 参数
const parms = useParams()
return (

);
}

export default Page2;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
5.2 query 参数
1、路由链接(携带参数)：
Page3
2、注册路由(声明接收)--无需变动：
}>
3、接收参数：
V5 this.props.location.search
V6 const [query,setQuery] = useSearchParams()
1
2
3
4
5
6
7
import '../App.css';
import {useSearchParams} from 'react-router-dom'

function Page3() {
const [query,setQuery] = useSearchParams()
return (

);
}

export default Page3;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
5.3 state 参数
【V5】
1、路由链接(携带参数)：
详情
2、注册路由(无需声明，正常注册即可)：

3、接收参数：
this.props.location.state
4、备注：刷新也可以保留住参数
【V6】
1、路由链接(携带参数)：
Page4
2、注册路由(无需声明，正常注册即可)：
}>
3、接收参数：
const { state, search} = useLocation()
4、备注：刷新也可以保留住参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import '../App.css';
import { useLocation } from 'react-router-dom'
import query from 'querystring'

function Page4() {
const { state, search} = useLocation()
return (

);
}

export default Page4;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
6、重定向
【V5】
1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：





【V6】
使用 Navigate 组件

1
2
3
4
5
6
7
8
9
10
11
7、编程式路由导航
【V5】
借助【this.prosp.history】对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
【V6】
1、使用 useNavigate 创建跳转方法 ，然后跳转
2、如何传参
parms/query 参数 直接写在路径上
state 参数 写在 第二个参数上
1
2
3
4
5
6
7
8
9
10
11
12
【案例】实现从page2 跳转到 page1 并携带 state参数

// page2
import '../App.css';
import {useParams, useNavigate} from 'react-router-dom';

function Page2() {
// 接收 params 参数
const parms = useParams()

// 编程式路由
const nav = useNavigate()
return (
    <div className="App">
        <h3>Page2</h3>
        <p>携带的params参数：{parms.id}</p>
        <button onClick={() => {
            nav('/page1', {
                state: { demo: "测试编程式路由导航" }
            })
        }}>跳转到page1</button>
    </div>
);

}

export default Page2;

// page1
import '../App.css';
import {Link} from 'react-router-dom';
import { Outlet,useLocation } from 'react-router-dom';

function Page1() {
const { state } = useLocation()
console.log(state);
return (

);
}

export default Page1;

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
8、路由懒加载
1、lazy Suspence 实际上是 react 的函数/组件 用的时候将内容包一下
2、react 其他函数 使用规则亦是如此
3、主要目的是用的组件才导入，对大型项目【打包】友好
1
2
3
// 1、路由表中引入方式变为 lazy
const Home = lazy(() => import('../pages/Home'))
const Login = lazy(()=>import('../pages/Login'))

// 2、使用路由组件的页面 展示时 引入 Suspence（组件）搭配使用
import {Suspense} from 'react'

1
2
3
4
5
6
7
8
9
10
9、路由表的使用
1、路由表 就是在外部再次创建一个数组文件 将配置信息填入
2、借助 useRoutes 根据路由表 渲染 路由出口
1
2
9.1 配置路由表
// route.js
import About from "../pages/About";
import Home from "../pages/Home";
import { Navigate } from "react-router-dom"

export default [
{
path: "/home",
element:
},
{
path: "/about",
element:
},
{
// 路由的重定向 当访问某个路径时 替换成另外一个路径
path: "/",
element:
},
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
9.2 借助 useRoutes 根据路由表 渲染 路由出口
import { Link, useRoutes } from "react-router-dom"
import routes from "./routes"

function App() {
// 1、借助 useRoutes 根据路由表 渲染 路由出口 -- element
let element = useRoutes(routes)

return (

)
}

export default App
```js