一天搞定Recat（5）——ReactRouter（上）【已完结】

Hello！大家好，今天带来的是React前端JS库的学习，课程来自黑马的往期课程，具体连接地址我也没有找到，大家可以广搜巡查一下，但是总体来说，这套课程教学质量非常高，每个知识点都有一个小案例，最后有一个总的美团外卖案例教学，大家可以看看我这篇文章，如果能够帮到你们，还请多多点赞o(￣▽￣)ｄ支持支持🌹，如果文章中有错误的或者是遗漏信息，可以在评论区指出或者是与我私信。我看到了消息，一定会及时更正过来∠(°ゝ°)。话不多说，直接开学💪⛽️。

本篇教学已完结，具体可查看教程：

文章目录

ReactRouter

ReactRouter

前端路由：一个路径path对应一个组件component当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染。

搭建路由环境

使用路由我们还是采用CRA创建项目的方式进行基础环境配置。

创建项目并安装所有依赖
复制代码
```
npx create-react-app 项目名称
```
安装最新的ReactRouter包
复制代码
```
npm i react-router-dom
```
启动项目
复制代码
```
npm run start
```

路由基础

在src文件夹下新建一个page文件夹，里面创建组件一文件夹和组件二文件夹来代表两个页面。然后在这两个文件夹里面分别创建index.js用来编写代码
新增一个router模块，里面创建一个index.js，之后导入上面创建的两个模块。还需要导入createBrowserRouter工具。
复制代码
```
import 组件一 from '/路径'
import 组件二 from '/路径'
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
```

创建router实例对象并且配置路由对应关系

复制代码

const router = createBrowserRouter([
	{
		path:'/第一个页面名称',
		element:<组件一 />
	},
	{
		path:'/第二个页面名称',
		element:<组件二 />
	},
])

来到index.js入口文件实现路由绑定

复制代码

//首先导入路由
import router from './路由文件路径'
//导入RouterProvider
import {RouterProvider} from 'react-router-dom'

root.render(
	<React.StrictMode>
		<RouterProvider router = {router}></RouterProvider>
	</React.StrictMode>
)

路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

React导航又分为两种，一种是声明式导航，一种是编程式导航。

声明式导航

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

复制代码

import {Link} from 'react-router-dom'
<Link to = "/要跳转的组件路径"> 内容 </Link>

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

编程式导航

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

复制代码

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

//在组件里面执行useNavigate()
const 组件名 =() =>{
	const navigate = useNavigate()
	return(
		<div>
			<标签名 事件={()=> navigate('/要跳转的组件路径')}>内容</标签名>
		</div>
	)
}

语法说明：通过调用navigate方法传入地址path实现跳转

注: 如果在跳转时不想添加历史记录，可以添加额外参数replace 为true
复制代码
navigate('/要跳转的组件路径', { replace: true } )

导航传参

searchParams传参

searchParams 是指URL的查询字符串部分，通常用于过滤、分页等操作。

参数跟在?符号后面，多个参数之间用&连接。
参数不是URL路径的一部分，因此不会影响路由匹配。

路由传参

复制代码

navigate('/要跳转的组件路径?属性名=属性值')

来到目标路由获取传递过来的参数

复制代码

const [params] = useSearchParams()
const 属性名 = params.get('属性名')

params传参

在Web开发中，params通常指的是路由参数，它是URL路径的一部分，用于传递数据到服务器端。

设置路由传递参数

复制代码

navigate('/要跳转的组件路径/属性值')

来到配置router的文件下加上一个占位符

复制代码

const router = createBrowserRouter([
	{
		path:'/第一个页面名称/:属性值',	//添加（ /:属性值）
		element:<组件一 />
	},
])

来到目标路由获取传递过来的参数

复制代码

const params = useParams()
const 属性名 = params.属性名