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路由

特性变更

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 路由用法

一级路由与多级路由

  {/*<Route path="/" element={}/>*/}
  <Route index element={}/> 
  <Route path="/film" element={}/>
  <Route path="/cinema" element={}/>
  <Route path="/center" element={}/>

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

2.4 重定向

使用 Navigate 组件替代

  <Route path="/film" element={} />
  <Route path="/cinema" element={} />
  <Route path="/center" element={} />
  <Route path="*" element={} />

2.5 嵌套路由

<Route path="/film" element={}>
  {/* <Route index  element={}/> */}
  <Route path="" element={}/>
  <Route path="nowplaying" element={}/>
  <Route path="comingsoon" element={}/>


// 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}`)

// 配置动态路由
<Route path="/detail/:id" element={}/>
    
// 获取动态路由参数
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 (
    
        
          首页 |
          新闻 | 
          我的 | 
          详情界面
          
        

        
          {/* <Route path="/" element={}> */}
          <Route index element={}>
          <Route path="home" element={}>
           {/* // 配置动态路由 */}
           <Route path="detail/:id" element={}/>
           {/* 路由嵌套 */}
          <Route path="news" element={}>
             {/* 二级路由 */}
             {/* 
             index用于嵌套路由，仅匹配父路径时，设置渲染的组件。
              解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。
              index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。
              */}
            <Route index element={}>
            <Route path='one' element={}>
            <Route path='two' element={}>
          
          
          {/* //当输入  /* 任意信息，重定向到首页 */}
          <Route path='*' element={} />
        
    
  );
}

export default App;

样式

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

className的用法：

V5：

  FAQs

V6

let activeClassName = "underline"

	  isActive ? activeClassName : undefined
	}
>
  FAQs

2.8 useRoutes 钩子配置路由

import React from "react";
import Layout from '../views/Layout'
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'

const routes=[
    {
        path:'/',
        element:,
        children:[
            {
                path:'/',
                element:,
            },
            {
                path:'/detail/:id',
                element:,
            },
            {
                path:'/about',
                element:,
            },
            {
                path:'/news',
                element:,
                children:[
                    { index: true, element:  },
                    {  path: "one", element:  },
                    { path: "two", element:  }
                ]
            }
        ]

    }
]

export default routes

app.js使用

import { useRoutes } from "react-router-dom";
import routes from './router/routes'
function App() {
  const element = useRoutes(routes);

  return (
   
    {element}
    

  );
}

export default App;

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

Switch -> Routers

Router component -> element

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

重定向

//v5



// v6

Router 可以直接嵌套 Router

这在之前是不行的需要在一个组件中再定义子路由

路由路径规则简化

useHistory成为History

v5

let history = useHistory();
function handleClick() {
  history.push("/home");
}

v6

let navigate = useNavigate();
function handleClick() {
  navigate("/home");
}

//v5
const { go, goBack, goForward } = useHistory();
//v6
const navigate = useNavigate();
 navigate(1)}>
 navigate(2)}>
 navigate(-1)}>
 navigate(-2)}>

重命名 to

useMatch -> useRouteMatch