2024年前端最新react-router-dom V6 中文文档教程总结

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

​编辑

2.8 useRoutes 钩子配置路由

---

一、对比 V5路由

特性变更

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

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import { BrowserRouter,HashRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render(                );

2.3 路由用法

一级路由与多级路由

  {/**/}         

• index用于嵌套路由，仅匹配父路径时，设置渲染的组件。
• 解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。

  2.4 重定向

  使用 Navigate 组件替代

  2.5 嵌套路由

    {/*  */}      // Film组件  相当于 

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

  2.6.1 声明式导航

  首页 |新闻 | 我的 | 详情界面

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

  // url传参const navigate = useNavigate()navigate(`/detail?id=${id}`)

  // 获取url参数import { useSearchParams } from 'react-router-dom'const [searchParams, setSearchParams] = useSearchParams()// 获取参数searchParams.get('id')// 判断参数是否存在searchParams.has('id')// 同时页面内也可以用set方法来改变路由setSearchParams({"id":2})

  2.7 动态路由

  // 跳转页面,路由传参navigate(`/detail/${id}`)// 配置动态路由    // 获取动态路由参数import { useParams } from 'react-router-dom'  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

  // 获取动态路由参数import { useNavigate,useLocation,useParams } from 'react-router-dom'  export function withRouter( Child ) {    return ( props ) => {      const location = useLocation();      const navigate = useNavigate();      const params = useParams()    //   const match= useMatch()      return ;    }  }  

  组件使用的时候

  import React, { Component } from 'react'// 获取动态路由参数import {withRouter} from './withRouter' class Detail extends Component {   constructor(){    super()   }  render() {    console.log(this);    return (      Detail        
  参数：{this.props.params.id}
            )  }}export default withRouter(Detail)

  App.js组件路由配置

  import Home from './views/Home'import News from './views/News'import About from './views/About'import One from './views/Today'import Two from './views/Yestoday'import Detail from './views/Detail'import './app.css'//配置路由import { Route, Link, Routes, BrowserRouter,NavLink,Navigate ,Outlet} from 'react-router-dom'function App() {  return (                      首页 |          新闻 |           我的 |           详情界面                                    {/*  */}                               {/* // 配置动态路由 */}                      {/* 路由嵌套 */}                       {/* 二级路由 */}             {/*              index用于嵌套路由，仅匹配父路径时，设置渲染的组件。              解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。              index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。              */}                                                                  {/* //当输入  /* 任意信息，重定向到首页 */}                        );}export default App;

  样式

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

  className的用法：

  V5：

    FAQs

  V6

  let activeClassName = "underline"### 最后整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】****《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**![](https://m.xiaogongju.com.cn/uploads/202511/07/16983dbd74d567e1.webp)![前端面试题宝典](https://m.xiaogongju.com.cn/uploads/202511/07/77608a3601bbb0d8.webp)![前端校招面试题详解](https://m.xiaogongju.com.cn/uploads/202511/07/a34caad5572257dc.webp)e"### 最后整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】****《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**[外链图片转存中...(img-RUwLlT56-1715585287537)][外链图片转存中...(img-jKlP7Ghc-1715585287538)][外链图片转存中...(img-nZ05Qyog-1715585287539)]