react-router-dom V6 中文文档教程总结

小胖梅前端

已于 2023-03-30 11:35:47 修改

阅读量1.4w

点赞数 10

分类专栏： react 文章标签： react.js javascript 前端 1024程序员节

于 2022-10-21 22:49:14 首次发布

本文链接：https://blog.csdn.net/xm1037782843/article/details/127454966

版权

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

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

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

2.7 动态路由

编辑

2.8 useRoutes 钩子配置路由

一、对比 V5路由

<Route> 特性变更

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

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

<Outlet></Outlet>让嵌套路由更简单

useNavigate代替useHistory

移除了<NavLink/>的 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(
    <BrowserRouter>
    <App />
    </BrowserRouter>
    
);

2.3 路由用法

一级路由与多级路由

<Routes>
  {/*<Route path="/" element={<Film/>}/>*/}
  <Route index element={<Film/>}/> 
  <Route path="/film" element={<Film/>}/>
  <Route path="/cinema" element={<Cinema/>}/>
  <Route path="/center" element={<Center/>}/>
</Routes>

index用于嵌套路由，仅匹配父路径时，设置渲染的组件。

解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。

2.4 重定向

使用 Navigate 组件替代

<Routes>
  <Route path="/film" element={<Film />} />
  <Route path="/cinema" element={<Cinema />} />
  <Route path="/center" element={<Center />} />
  <Route path="*" element={<Navigate to="/film" />} />
</Routes>