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

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

     本篇教学已完结，具体可查看教程：
1. 一天搞定React（1）——React安装与配置
2. 一天搞定React（2）——JSX语法
3. 一天搞定React（3）——Hoots组件
4. 一天搞定React（4）——Redux
5. 一天搞定Recat（5）——ReactRouter（上）
6. 一天搞定React（5）——ReactRouter（下）

文章目录

• ReactRouter
• • 搭建路由环境
  • 路由基础
  • 路由导航
  • • 声明式导航
    • 编程式导航
    • 导航传参
    • • searchParams传参
      • params传参

ReactRouter

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

搭建路由环境

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

1. 创建项目并安装所有依赖

   npx create-react-app 项目名称 

2. 安装最新的ReactRouter包

   npm i react-router-dom 

3. 启动项目

   npm run start 

路由基础

1. 在src文件夹下新建一个page文件夹，里面创建组件一文件夹和组件二文件夹来代表两个页面。然后在这两个文件夹里面分别创建index.js用来编写代码

2. 新增一个router模块，里面创建一个index.js，之后导入上面创建的两个模块。还需要导入createBrowserRouter工具。

   import 组件一 from '/路径' import 组件二 from '/路径' import {createBrowserRouter,RouterProvider} from 'react-router-dom' 

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

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

4. 来到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路径的一部分，因此不会影响路由匹配。

1. 路由传参

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

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

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

params传参

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

1. 设置路由传递参数

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

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

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

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

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