React-Router用法
# react路由
前言:
react 18.x + router@6
# 1.项目创建
create-react-app project
1
cd project
1
yarn start
1
# 2.整理项目架构
project
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── views
│ │ ├── App.css
│ │ └── App.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
├── README.md
├── package-lock.json
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 3.使用sass 预处理
yarn add sass
1
# 4.使用router
目前最新版 路由是 react-router-dom@6.x
yarn add react-router-dom
1
import { HashRouter,Link,Route,Routes } from 'react-router-dom'
1
# 4.1 路由核心组件
- HashRouter
作用:包裹整个应用,一个React应用只需要使用一次
两种常用Router:BrowerRouter和HashRouter(history和hash路由)
- Link
作用:用于指定导航链接,完成路由跳转
语法说明:组件通过to属性指定路由地址,最终会渲染为a链接元素
- Routes
作用:提供一个路由出口,满足条件的路由组件会渲染到组件内部 相当于老版本:Switch
- Route
作用:用于指定导航链接,完成路由匹配
语法说明:path属性指定匹配的路径地址,element属性指定要渲染的组件
# 4.2 路由案例
一级路由: 首页 Home.jsx ,订单页 Order.jsx , 个人中心 Mine.jsx
首页下二级路由: 推荐 Recommend.jsx 【默认打开】 商品列表 Goods.jsx
配置实现
1.创建页面级jsx 组件
2.导入到根组件中
3.配置 HashRouter
# 1.创建页面级 组件
src
├── assets
│ └── logo.svg
├── views
│ ├── 404
│ │ └── NotFound.jsx
│ ├── home
│ │ ├── Goods.jsx
│ │ ├── Home.jsx
│ │ └── Recommend.jsx
│ ├── mine
│ │ └── Mine.jsx
│ ├── order
│ │ └── Order.jsx
│ ├── App.jsx
│ └── App.scss
├── index.css
└── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2.导入根组件中 并配置 hashRouter
App.jsx
import React from 'react'
import { HashRouter, Routes, Route, Link } from 'react-router-dom'
import './App.scss'
import Home from './home/Home'
import Recommend from './home/Recommend'
import Goods from './home/Goods'
import Mine from './mine/Mine'
import Order from './order/Order'
import NotFound from './404/NotFound'
//根组件
export default function App() {
return (
<div>
{/* 路由配置 */}
<HashRouter>
{/* link 导航 类似于 a标签 */}
<div className="nav">
<Link to='/home'> 首页 </Link>
<Link to="/order"> 订单 </Link>
<Link to='/mine'> 我的</Link>
</div>
{/* 定义层级路由 */}
<Routes>
{/* 默认打开 访问home index索引路由不能有子路由 */}
<Route index element={<Home/>}></Route>
<Route path='/home' element={<Home />}>
{/* 子路由定义 index 表示默认打开的子页面 */}
<Route index element={<Recommend />}></Route>
<Route path='/home/goods' element={<Goods />}></Route>
</Route>
<Route path='/order' element={<Order />}></Route>
<Route path='/mine' element={<Mine />}></Route>
{/* 404 路由 */}
<Route path='*' element={<NotFound/>}></Route>
</Routes>
</HashRouter>
</div>
)
}
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
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
# 4.3 访问路由
- 通过 Link 组件访问
<Link to='/mine'> 我的</Link>
1
- 通过 js访问 【编程式导航】
通过 react-router-dom 的钩子函数 useNavigate 进行跳转
import React from 'react'
//导入跳转钩子函数
import {useNavigate } from 'react-router-dom';
export default function Order() {
//调用钩子函数 返回一个跳转函数
const navigate = useNavigate();
//实现跳转事件
const toGoods = ()=>{
//跳转时 不加入历史记录栈中 需额外设置replce 为true
navigate('/home/goods',{replace:true})
}
return (
<div>Order
<button onClick={toGoods}>前往商品列表</button>
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 4.4 跨页面传值
路由跳转携带参数(两种方式:searchParams和params)
- searchParams
传参
navigate('/goods?id=1000')
1
接收参数
import {useSearchParams} from 'react-router-dom'
let [params] = useSearchParams();
console.log(params.get('id'));
1
2
3
4
2
3
4
- params
传参
navigate('/goods/10000')
1
接受参数
import {useParams} from 'react-router-dom'
let params = useParams();
console.log(params.id);
1
2
3
4
2
3
4
配置/注册路由 的代码需要修改 App.jsx
<Route path='/home/goods/:id' element={<Goods />}></Route>
1
编辑 (opens new window)
上次更新: 2023/01/18, 10:06:34