ReactRouter

React-Router

1. 概念：一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染
2. 路由语法：

import {createBrowserRouter, RouterProvider} from 'react-router-dom'

// 1. 创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
    {
        path: '/login',
        element: <div>我是登录页</div>
        // 支持组件或jsx语法
    }，
    {
		path: '/article',
    	element: <div>我是文章页</div>
    }
])
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
	<React.StrictMode>
    	<RouterProvider router={router}></RouterProvider>
    </React.StrictMode>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

路由导航

声明式导航

声明式导航是指通过在模板中通过<Link/> 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

<Link to= "/article">文章</Link>
// 语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可
1
2

编程式导航

编程式导航是指通过’useNavigate’钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如在登录请求完毕之后跳转就可以选择这种方式，更加灵活，语法如下：

import { useNavigate } from "react-router-dom"

const Login = () => {
    const navigate = useNavigate() 
    return (
    	<div>
        	我是登录页
            <button onClick={() => navigate('/article')}>跳转至文章</button>
            // 语法说明： 通过调用navigate方法传入地址path实现跳转
        </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12

路由导航传参

• searchParams传参

// 传参
navigate('/article?id==1001&name=jack')
// 获取参数
const [params] = useSearchParams()
// 获取参数id
let id = params.get('id')
// 获取参数name
let name = params.get('name')
1
2
3
4
5
6
7
8

• params传参

// 传递一个参数
navigate('/article/1001')
// 需要在配置路由路径时添加占位符
const params = useParams()
let id = params.id

// 传递多个参数
navigate('/article/1001/jack')
const params = useParams()
let id = params.id
let name = params.name
// 在路由里配置
path: '/article/:id/:name'
1
2
3
4
5
6
7
8
9
10
11
12
13

嵌套路由

1. 概念：在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由

嵌套路由配置

• 使用children属性配置路由嵌套关系
• 使用<Outlet/>组件配置二级路由渲染位置
  

ReactRouter - 默认二级路由

1. 当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true，如下：
   

ReactRouter - 404 路由配置

1. 概念：当浏览器输入url的路径在整个路由配置中都找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染
2. 实现步骤：
   • 准备一个NotFound组件
   • 在路由表数组的末尾，以*号作为路由path配置路由
     

ReactRouter - 两种路由模式