一天搞定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.属性名
    
相关推荐
Ocean☾几秒前
前端基础-html-注册界面
前端·算法·html
Rattenking几秒前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu2 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym7 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫8 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫12 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat13 分钟前
前端性能优化2
前端
一ge科研小菜鸡36 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app