一天搞定Recat(5)——ReactRouter(上)【已完结】

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

本篇教学已完结,具体可查看教程:

  1. 一天搞定React(1)------React安装与配置

  2. 一天搞定React(2)------JSX语法

  3. 一天搞定React(3)------Hoots组件

  4. 一天搞定React(4)------Redux5. 一天搞定Recat(5)------ReactRouter(上)

  5. 一天搞定React(5)------ReactRouter(下)

文章目录

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.属性名
    
相关推荐
雯0609~15 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ19 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z24 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript