(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
目录
什么是前端路由
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染
创建路由开发环境
使用路由我们还是采用CRA创建项目的方式进行基础环境配置 1. 创建项目并安装所有依赖 npx create-react-app react-router-pro npm i 2. 安装最新的 ReactRouter包 npm i react-router-dom 3. 启动项目 npm run start
快速开始
需求:创建一个可以切换登录页和文章页的路由系统
抽象路由模块
实际开发中的router配置![]()
article:
import { useParams, useSearchParams } from "react-router-dom" const Article = () => { // const [params] = useSearchParams() // const id = params.get('id') // const name = params.get('name') const params = useParams() const id = params.id const name = params.name return <div>我是文章页{id}-{name}</div> } export default Article
login:
import { Link, useNavigate } from 'react-router-dom' const Login = () => { const navigate = useNavigate() return ( <div> 我是登录页 </div> ) } export default Login
router:
import Login from '../page/Login' import Article from '../page/Article' import { createBrowserRouter, createHashRouter } from 'react-router-dom' const router = createBrowserRouter([ { path: '/login', element: <Login /> }, { path: '/article/:id/:name', element: <Article /> } ]) export default router
index:
import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import reportWebVitals from './reportWebVitals' import { RouterProvider } from 'react-router-dom' // 1. 导入路由router import router from './router' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <React.StrictMode> {/* 2. 路由绑定 */} <RouterProvider router={router}></RouterProvider> </React.StrictMode> )
路由导航
什么是路由导航
路由系统中的多个路由之间需要进行 路由跳转 ,并且在跳转的同时有可能需要 传递参数进行通信声明式导航
声明式导航是指通过在模版中通过 `<Link/> ` 组件描述出要跳转到哪里 去,比如后台管理系统的左侧菜单通常使用这种方式进行语法说明:通过给组件的 to属性指定要跳转到路由path ,组件会被渲染为浏览器支持的a链接,如果需要传参直接 通过字符串拼接 的方式拼接参数即可
import { Link, useNavigate } from 'react-router-dom' const Login = () => { const navigate = useNavigate() return ( <div> 我是登录页 {/* 声明式的写法 */} <Link to="/article">跳转到文章页</Link> </div> ) } export default Login
编程式导航
编程式导航是指通过 `useNavigate` 钩子得到导航方法,然后通过 调用方法以命令式的形式 进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活语法说明:通过调用navigate方法传入地址path实现跳转
导航传参
嵌套路由配置
什么是嵌套路由
在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由,例如:
嵌套路由配置
实现步骤: 1. 使用 children 属性配置路由嵌套关系2. 使用 `<Outlet/>` 组件配置二级路由渲染位置
默认二级路由
当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉path,设置index属性为true
404路由配置
场景:当浏览器输入url的路径在整个路由配置中都找不到对应的 path,为了用户体验,可以使用 404 兜底组件进行渲染 实现步骤: 1. 准备一个NotFound组件2. 在路由表数组的末尾,以*号作为路由path配置路由
俩种路由模式
各个主流框架的路由常用的路由模式有俩种, history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建标签:const,ReactRouter,day06,react,import,router,path,路由 From: https://blog.csdn.net/weixin_73295475/article/details/140245845![]()