React 路由v6 - 超全详解
React 路由v6 - 超全详解
置顶
前端不秃头
已于2022-10-19 15:18:00修改
742
收藏
46
文章标签：
react.js
javascript
前端
于2022-10-16 11:09:21首次发布
React router v6 路由
Ⅱ、 动态路由
Ⅲ、路由重定向
Ⅳ、路由跳转 (两种形式)
Ⅴ、路由懒加载
已经习惯了 v5 版本的路由 ，那么 v6 版本的路由 该怎么应用呢？
文章目录 React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载 Ⅰ、路由 v6 (两种形式)方案一 ： （ 不推荐 ）
通过标签 嵌套 标签 的形式通过 Routes 为 包裹 Route 标签的形式例 ： 用法 👇
import { Route,Routes,BrowserRouter } from "react-router-dom"; import Page1 from '../view/Page1' import Page2 from '../view/Page2' import Page404 from '../view/Page404' function App() { <BrowserRouter> <Routes> <Route path='/page1' element = {<Page1 />} /> <Route path='/page2' element = {<Page2 />} /> <Route path='*' element = {<Page404 /} /> <Routes> <BrowserRouter> } export default App; 需要添加子路由 就继续嵌套要在 <Page1 /> 组件下 放入 <Outlet /> => 【确定子路由出现的位置】例 ： 子路由 👇
<Route path='/page1' element = {<Page1 />} > <Route path='/page1/test1' element = {<Test1 />} /> <Route path='/page1/test2' element = {<Test2 />} /> </Route>方案二 ：（ 推荐 ）
通过 react 17 之后推出的 hooks -> useRoutes 这个 hooks ，看起来更像 vue 的路由配置，而不是堆标签。例 ： App.jsx 👇
import { BrowserRouter} from "react-router-dom"; import Element from './routes' function App() { return ( <BrowserRouter> <Element /> </BrowserRouter> ) } export default App;例 ： 路由配置 /routes/index.jsx 👇
import { useRoutes } from "react-router-dom"; import Page1 from '../view/Page1' import Page2 from '../view/Page2' import Page404 from '../view/Page404' function Element() { const element = useRoutes([ { path: '/page1', element: <Page1 /> }, { path: '/page2', element: <Page2 /> }, { path: '*', element: LazyLoad('/view/404') } ]) return (element); } export default Element; 子路由可以通过 children 来嵌套实现例 ： 子路由 👇
... { path: '/page1', element: <Page1 /> children: [ { path: '/page1/aaa', element: <Aaa /> }, { path: '/page1/bbb', element: <Baa /> } ] } ...Ⅱ、 动态路由
动态路由的作用，就是在去该路由的同时，还能带去一定的参数 ，达到路由自定义传参的作用
① 绑定参数 方案一 ： （标签形式 创建的路由）
<Route path = '/page1/:content' element = {<Page1 />} />方案二 ：（useRoutes 钩子创建的路由）
... { path: '/page1/:content', element: <Page1 /> }, ...② 接收参数
接收的时候通过 useParams 钩子去接收
import {useParams} from 'react-router-dom'; export default function Detail(props){ let { content } = useParams(); return( <div></div> ) }Ⅲ、路由重定向
方案一 ： （ 通过Navigate ）
import { Navigate} from "react-router-dom"; ... { path: '*', element: <Navigate to='/page404'/> }, ...方案二 ：( 自己封装 ) 例 ： 封装一个组件 👇
import React,{useEffect} from 'react' import {useNavigate } from 'react-router-dom' export default function Redirect(props) { const navigate = useNavigate(); useEffect(()=>{ navigate(props.to,{replace:true}) }) return null }例 ： 使用：👇
import Redirect from './Redirect' { path: '*', element: <Redirect to='/page404'/> },Ⅳ、路由跳转 (两种形式)
方案二 ： （ 标签类型 ： 和上面的 路由重定向 一样 )
import {NavLink} from 'react-router-dom' function Index() { return ( <ul> <li><NavLink to='page1'> 页面1 </NavLink></li> <li><NavLink to='page1'> 页面2 </NavLink></li> </ul> ) }方案二 ： （ 方法类型 ）
import { useNavigate } from 'react-router-dom' function Index() { return ( <ul> <li onClick={() => { useNavigate('/page1') }}>页面1</li> <li onClick={() => { useNavigate('/page2') }}>页面2</li> </ul> ) }Ⅴ、路由懒加载
1、路由懒加载，对与 性能 来说是一个非常好的 优化点 ; 2、只有在进入该路由的时候才，去 按需加载 对应的，而不是一次性去加载全部; 3、通过 React.lazy 方法来懒加载 ; 4. 同时可以通过React.Suspense 的 fallback 去展示加载中的 效果 ;
例 ： 封装例子 👇 ( 同时更加简便导入 )
import { useRoutes } from "react-router-dom"; import React from 'react'; const LazyLoad = (path) => { //传入在view 下的路径 const Comp = React.lazy(() => import(`../view${path}`)) return ( <React.Suspense fallback={<> 加载中...</>}> <Comp /> </React.Suspense> ) } function Element() { const element = useRoutes([ { path: '/page1', element: LazyLoad('/Page1') }, { path: '/page2', element: LazyLoad('/Page2') } ]) return (element); } export default Element;🚐 💨 华为社招渠道 👉 👉 请先阅读 🚀🚀🚀 总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁