React-Router用法

# react路由

前言：

react 18.x + router@6

# 1.项目创建

create-react-app project

cd project

yarn start

# 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

# 3.使用sass 预处理

yarn add sass

# 4.使用router

目前最新版路由是 react-router-dom@6.x

yarn add react-router-dom

import { HashRouter,Link,Route,Routes } from 'react-router-dom'

# 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.导入根组件中并配置 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

# 4.3 访问路由

通过 Link 组件访问

<Link to='/mine'> 我的</Link>

通过 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

# 4.4 跨页面传值

路由跳转携带参数（两种方式：searchParams和params）

searchParams

传参

navigate('/goods?id=1000')

接收参数

import {useSearchParams} from 'react-router-dom'

let [params] = useSearchParams();
console.log(params.get('id'));

1
2
3
4

params

传参

navigate('/goods/10000')

接受参数

import {useParams} from 'react-router-dom'

let params = useParams(); 
console.log(params.id);