【从零开始学 React | 第六章】ReactRouter

前言本章主要讲了ReactRouter里面涉及到的各种知识。【从零开始学 React | 第六章】ReactRouter一ReactRouter二路由导航1.声明式导航2.编程式导航三导航传参四嵌套路由配置五404路由配置六两种路由模式七杂项知识点1.useSearchParams2.useParams一ReactRouter1.什么是ReactRouterReact Router 是 React 生态里最主流、最标准的前端路由库它专门用来给 React 应用实现页面跳转功能。核心作用前端路由的本质就是让不同 URL 对应不同的组件 / 页面实现无刷新跳转。2.什么是前端路由一个路径 path 对应一个组件 component当我们在浏览器中访问一个 path 的时候path 对应的组件会在页面中进行渲染。constroutes[{path:/about,component:About,},{path:/article,component:Article,},]3.创建路由开发环境使用路由我们还是采用 CRA 创建项目的方式进行基础环境配置创建项目并安装所有依赖npx create-react-app react-router-pro npm i安装最新的 ReactRouter 包npm i react-router-dom启动项目npm run start4.实际开发中配置router1.创建路由规则导入页面组件Login / Article使用 createBrowserRouter 创建路由实例配置路径与组件的对应关系导出路由实例供 App.js 中 RouterProvider 使用// src/router/index.jsimportLoginfrom../page/LoginimportArticlefrom../page/Articleimport{createBrowserRouter}fromreact-router-domconstroutercreateBrowserRouter([{path:/login,element:Login/},{path:/article,element:Article/}])exportdefaultrouter2.把定义好的路由规则注入应用让整个项目支持页面切换功能。// 1. 导入路由所需的核心组件importReactDOMfromreact-dom/clientimport{RouterProvider}fromreact-router-dom// 2. 导入你配置好的路由规则importrouterfrom./router// 3. 创建根节点并渲染constrootReactDOM.createRoot(document.getElementById(root))root.render(React.StrictMode{/* 4. 注入路由实例 */}RouterProvider router{router}//React.StrictMode)二路由导航概念在不刷新整个页面的情况下根据不同路径切换显示不同组件实现页面间跳转的功能。1.声明式导航声明式导航是指通过在模版中通过Link/组件描述出要跳转到哪里去比如后台管理系统的左侧菜单通常使用这种方式进行语法:import{Link}fromreact-router-domLink to/article文章/Link说明通过给组件的to属性指定要跳转到路由path组件会被渲染为浏览器支持的 a 链接如果需要传参直接通过字符串拼接的方式拼接参数即可2.编程式导航编程式导航是指通过useNavigate钩子得到导航方法然后通过调用方法以命令式的形式进行路由跳转比如想在登录请求完毕之后跳转就可以选择这种方式更加灵活import{useNavigate}fromreact-router-domconstLogin(){constnavigateuseNavigate()return(div我是登录页button onClick{()navigate(/article)}跳转至文章/button/div)}三导航传参1.searchParams传参button onClick{()navigate(/article?id1001namejack)}searchParams传参/button2.params传参//先配置占位符{path:/article/:id/:name,element:Article/},button onClick{()navigate(/article/1001/jack)}Params传参/button四嵌套路由配置在一级路由中又内嵌了其他路由这种关系就叫做嵌套路由嵌套至一级路由内的路由又称作二级路由实现步骤使用children属性配置路由嵌套关系使用Outlet/组件配置二级路由渲染位置路由配置{path:/,element:Layout/,children:[{path:board,element:Board/,},{path:about,element:About/,},],}Layout 父组件constLayout(){return(divdiv我是Layout/divLink to/board面板/LinkLink to/about关于/Link{/* 二级路由出口 */}Outlet//div)}默认二级路由配置当访问的是一级路由时默认的二级路由组件可以得到渲染只需要在二级路由的位置去掉 path设置 index 属性为 truechildren:[{index:true,element:Board/,},{path:about,element:About/,},]五404路由配置场景当浏览器输入 url 的路径在整个路由配置中都找不到对应的 path为了用户体验可以使用 404 兜底组件进行渲染1.准备一个 NotFound 组件constNotFound(){// 自定义模版returndivthisis NotFound/div}exportdefaultNotFound2.在路由表数组的末尾以 * 号作为路由 path 配置路由{path:*,element:NotFound/}这样当用户输入一个不存在的 URL 路径时就不会出现页面空白或浏览器原生错误而是会渲染我们自定义的 404 NotFound 组件给用户清晰的页面不存在提示同时可以引导用户返回首页大幅提升应用的用户体验。六两种路由模式各个主流框架的路由常用的路由模式有俩种history 模式和 hash 模式ReactRouter 分别由 createBrowserRouter 和 createHashRouter 函数负责创建hash 模式URL 中 # 后面的部分不会发给服务器前端直接监听路由变化刷新不会报错部署简单history 模式依赖 HTML5 History API需要后端配置配合将所有路由指向 index.html否则刷新会 404七杂项知识点1.useSearchParamsuseSearchParams是 React Router 提供的 Hook用来获取、修改地址栏上的查询参数? 后面的内容比如?id1nametest。// 1. 导入钩子import{useSearchParams}fromreact-router-dom// 2. 在组件中使用const[searchParams,setSearchParams]useSearchParams()// 3. 获取参数searchParams.get(参数名)// 4. 修改/设置参数setSearchParams({参数名:值})2.useParams获取动态路由路径上的参数。// 1. 导入import{useParams}fromreact-router-dom// 2. 获取路径参数const{参数名}useParams()// 示例// 路由: /user/:id// const { id } useParams()和useSearchParams区别useParams取 / 路径上的参数/user/:iduseSearchParams取 ? 后面的查询参数/user?id1最后如果我的内容对你有帮助请点赞评论收藏创作不易。大家的支持就是我坚持下去的动力