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