• react-router-dom V6 路由

    个人录制的最新Vue项目学习视频：B站

    小胖梅-的个人空间_哔哩哔哩_Bilibili

    目录

    一、对比 V5路由

    二、路由使用步骤

    2.1  引入库文件

    2.2 首页引入Router

    2.3 路由用法

    一级路由与多级路由

    2.4 重定向

    使用 Navigate 组件替代

    2.5 嵌套路由

    2.6 声明式导航与编程式导航

    2.6.1 声明式导航

    2.6.2 编程式导航 (注意HOOK使用 类组件不可以直接使用)

    2.7 动态路由

    ​编辑

    2.8 useRoutes 钩子配置路由

    一、对比 V5路由


    <Route> 特性变更

    path：与当前页面对应的URL匹配。

    element：新增，用于决定路由匹配时，渲染哪个组件。代替v5的component和render。

    代替了

    让嵌套路由更简单

    useNavigate代替useHistory

    移除了的 activeClassName 和 activeStyle

    钩子useRoutes代替react-router-config

    移除了exact 

    路由官网：https://reactrouter.com/en/v6.3.0/api

    二、路由使用步骤

    2.1  引入库文件

    引入最新的reac-router-dom

    yarn

    $ yarn add react-router-dom@6

    npm

    $ npm install react-router-dom@6

    目前安装react项目 默认已经是v6版本了 不需要特殊加版本号

    2.2 首页引入Router

    我这里引入的是HashRouter，还有一种BrowserRouter

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import { BrowserRouter,HashRouter } from "react-router-dom";
    5. const root = ReactDOM.createRoot(document.getElementById('root'));
    6. root.render(
    7.     <BrowserRouter>
    8.     <App />
    9.     BrowserRouter>
    10.     
    11. );

    2.3 路由用法

    一级路由与多级路由

    1. <Routes>
    2.   {/*<Route path="/" element={<Film/>}/>*/}
    3.   <Route index element={<Film/>}/> 
    4.   <Route path="/film" element={<Film/>}/>
    5.   <Route path="/cinema" element={<Cinema/>}/>
    6.   <Route path="/center" element={<Center/>}/>
    7. </Routes>
    • index用于嵌套路由，仅匹配父路径时，设置渲染的组件。
    • 解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。

    2.4 重定向

    使用 Navigate 组件替代

    1. <Routes>
    2.   <Route path="/film" element={<Film />} />
    3.   <Route path="/cinema" element={<Cinema />} />
    4.   <Route path="/center" element={<Center />} />
    5.   <Route path="*" element={<Navigate to="/film" />} />
    6. </Routes>

    2.5 嵌套路由

    1. <Route path="/film" element={<Film/>}>
    2.   {/* <Route index  element={<Nowplaying/>}/> */}
    3.   <Route path="" element={<Redirect to="/film/nowplaying"/>}/>
    4.   <Route path="nowplaying" element={<Nowplaying/>}/>
    5.   <Route path="comingsoon" element={<Comingsoon/>}/>
    6. </Route>
    7.  
    8. // Film组件 <Outlet /> 相当于 <router-view />

    2.6 声明式导航与编程式导航

    2.6.1 声明式导航

    1. <NavLink to='/'>首页</NavLink> |
    2. <NavLink to='/news'>新闻</NavLink> | 
    3. <NavLink to='/about'>我的</NavLink> | 
    4. <NavLink to='/detail/123'>详情界面</NavLink>

    2.6.2 编程式导航 (注意HOOK使用 类组件不可以直接使用)

    1. // url传参
    2. const navigate = useNavigate()
    3. navigate(`/detail?id=${id}`)
    1. // 获取url参数
    2. import { useSearchParams } from 'react-router-dom'
    3.  
    4. const [searchParams, setSearchParams] = useSearchParams()
    5. // 获取参数
    6. searchParams.get('id')
    7. // 判断参数是否存在
    8. searchParams.has('id')
    9. // 同时页面内也可以用set方法来改变路由
    10. setSearchParams({"id":2})

    2.7 动态路由

    1. // 跳转页面,路由传参
    2. navigate(`/detail/${id}`)
    3.  
    4. // 配置动态路由
    5. <Route path="/detail/:id" element={<Detail />}/>
    6.     
    7. // 获取动态路由参数
    8. import { useParams } from 'react-router-dom'  
    9. const { id } = useParams()

    发现props是一个空对象！！！ 这样很多的功能根本通过路由参数实现不了了，比如：

    编程式路由导航，在非受控组件中可以使用useNavigate这个钩子进行导航，而在类组件中无能为力，只能想办法使用这个标签，非常的麻烦，可以看看这篇文章：https://www.jianshu.com/p/5bdfd2fac2cd
    获取路由参数 ，在以往的react-router-dom版本中，路由的三个参数location、history、match都是直接挂载到组件的props身上，即使组件不是路由组件，也可以使用withRouter高阶组件对普通组件进行增强，也可以将这三个参数带到props身上。

    在v6版本中withRouter直接被移除。怎么办？
    估计官方的目的是极力推荐我们使用React Hooks ，从而提高类组件的使用门槛（tm不能像vue那样做做兼容，平滑过度吗？）。只能自己编写高阶组件withRouter从而实现这一需求，可以看看这篇文章中的回答：https://cloud.tencent.com/developer/ask/sof/296970

    1. // 获取动态路由参数
    2. import { useNavigate,useLocation,useParams } from 'react-router-dom'  
    3.  
    4. export function withRouter( Child ) {
    5.     return ( props ) => {
    6.       const location = useLocation();
    7.       const navigate = useNavigate();
    8.       const params = useParams()
    9.     //   const match= useMatch()
    10.       return <Child params={params}  navigate={ navigate } location={ location } />;
    11.     }
    12.   }

     组件使用的时候

    1. import React, { Component } from 'react'
    2. // 获取动态路由参数
    3. import {withRouter} from './withRouter'
    4.  class Detail extends Component {
    5.    constructor(){
    6.     super()
    7.    }
    8.   render() {
    9.     console.log(this);
    10.     return (
    11.       <div>Detail
    12.         <p>参数：{this.props.params.id}</p>
    13.       </div>
    14.     )
    15.   }
    16. }
    17. export default withRouter(Detail)

    App.js组件路由配置

    1. import Home from './views/Home'
    2. import News from './views/News'
    3. import About from './views/About'
    4. import One from './views/Today'
    5. import Two from './views/Yestoday'
    6. import Detail from './views/Detail'
    7. import './app.css'
    8. //配置路由
    9. import { Route, Link, Routes, BrowserRouter,NavLink,Navigate ,Outlet} from 'react-router-dom'
    10. function App() {
    11.   return (
    12.     <>
    13.         <div>
    14.           <NavLink to='/'>首页</NavLink> |
    15.           <NavLink to='/news'>新闻</NavLink> | 
    16.           <NavLink to='/about'>我的</NavLink> | 
    17.           <NavLink to='/detail/123'>详情界面</NavLink>
    18.           <Outlet/>
    19.         </div>
    20.  
    21.         <Routes>
    22.           {/* <Route path="/" element={<Home />}></Route> */}
    23.           <Route index element={<Home />}></Route>
    24.           <Route path="home" element={<Home />}></Route>
    25.            {/* // 配置动态路由 */}
    26.            <Route path="detail/:id" element={<Detail />}/>
    27.            {/* 路由嵌套 */}
    28.           <Route path="news" element={<News />}>
    29.              {/* 二级路由 */}
    30.              {/* 
    31.              index用于嵌套路由，仅匹配父路径时，设置渲染的组件。
    32.               解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。
    33.               index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。
    34.               */}
    35.             <Route index element={<One/>}></Route>
    36.             <Route path='one' element={<One/>}></Route>
    37.             <Route path='two' element={<Two />}></Route>
    38.           </Route>
    39.           <Route path="about" element={<About />}></Route>
    40.           {/* //当输入  /* 任意信息，重定向到首页 */}
    41.           <Route path='*' element={<Navigate replace to="/home" />} />
    42.         </Routes>
    43.     </>
    44.   );
    45. }
    46.  
    47. export default App;

    样式

    在V6 版本中activeClassName 和activeStyle 已经从NavLinkProps中移除，可以直接在<NavLink>的className和style中使用一个函数来使用active。

    className的用法：

    V5：

    1. <NavLink to="/faq" activeClassName="selected">
    2.   FAQs
    3. </NavLink>

    V6

    1. let activeClassName = "underline"
    2. <NavLink
    3. 	to="/faq"
    4. 	className={({ isActive }) =>
    5. 	  isActive ? activeClassName : undefined
    6. 	}
    7. >
    8.   FAQs
    9. </NavLink>

    2.8 useRoutes 钩子配置路由

    1. import React from "react";
    2. import Layout from '../views/Layout'
    3. import Home from '../views/Home'
    4. import News from '../views/News'
    5. import About from '../views/About'
    6. import One from '../views/Today'
    7. import Two from '../views/Yestoday'
    8. import Detail from '../views/Detail'
    9.  
    10. const routes=[
    11.     {
    12.         path:'/',
    13.         element:<Layout/>,
    14.         children:[
    15.             {
    16.                 path:'/',
    17.                 element:<Home/>,
    18.             },
    19.             {
    20.                 path:'/detail/:id',
    21.                 element:<Detail/>,
    22.             },
    23.             {
    24.                 path:'/about',
    25.                 element:<About/>,
    26.             },
    27.             {
    28.                 path:'/news',
    29.                 element:<News/>,
    30.                 children:[
    31.                     { index: true, element: <One /> },
    32.                     {  path: "one", element: <One /> },
    33.                     { path: "two", element: <Two /> }
    34.                 ]
    35.             }
    36.         ]
    37.  
    38.     }
    39. ]
    40.  
    41. export default routes

    app.js使用

    1.  
    2. import { useRoutes } from "react-router-dom";
    3. import routes from './router/routes'
    4. function App() {
    5.   const element = useRoutes(routes);
    6.  
    7.   return (
    8.    <>
    9.     {element}
    10.     
    11.  
    12.   );
    13. }
    14.  
    15. export default App;

    三、react-router-dom升级v6内容

    Switch -> Routers

    Router component -> element

    <Route path='/admin/dashboard' component={Dashboard} />

    <Route path=":id" element={<UserProfile />} />


    重定向
     

    1. //v5
    2. <Redirect to="about" />
    3. <Redirect to="home" push />
    4.  
    5. // v6
    6. <Navigate to="about" replace />
    7. <Navigate to="home" />


    Router 可以直接嵌套 Router
    这在之前是不行的需要在一个组件中再定义子路由


    路由路径规则简化


    useHistory成为History

    1. v5
    2.  
    3. let history = useHistory();
    4. function handleClick() {
    5.   history.push("/home");
    6. }
    1.  
    2. v6
    3.  
    4. let navigate = useNavigate();
    5. function handleClick() {
    6.   navigate("/home");
    7. }
    1. //v5
    2. const { go, goBack, goForward } = useHistory();
    3. //v6
    4. const navigate = useNavigate();
    5. <button onClick={() => navigate(1)}>
    6. <button onClick={() => navigate(2)}>
    7. <button onClick={() => navigate(-1)}>
    8. <button onClick={() => navigate(-2)}>

    重命名 to
    useMatch -> useRouteMatch

  • 相关阅读:
    系列十三、Redis的哨兵机制
    【华为机试题 HJ108】求最小公倍数
    Trie字典树详解
    Element Plus el-form表单自定义插槽如何使用
    2024王道考研计算机组成原理——指令系统
    js中添加屏蔽F12 审查元素、屏蔽开发者工具、屏蔽右键菜单、屏蔽剪切、屏蔽选中操作
    Mybatis总结
    java运行linux命令时报错
    Qt 之悬浮球菜单
    RocketMQ——MQ基础知识
  • 原文地址：https://blog.csdn.net/xm1037782843/article/details/127454966