react-router-dom v6 使用

react-router-dom

react-router-dom v6 整体体验相对于 v5 ，体验要好更多，最大的一个改变，就是曾经的 Route 不可嵌套，整个路由配置必须拆分成若干小块，除非通过 react-router-config 这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。

官网地址: react-router

当前例子，根据分支对应例子：react-router-dom-v6-example

v6 与 v5 的区别

当前环境

1. 安装

   npm install --save react-router-dom history

2. react, react-router-dom 以及相关插件版本。

   “dependencies”: {
   “history”: “^5.1.0”,
   “react”: “^17.0.2”,
   “react-dom”: “^17.0.2”,
   “react-router-dom”: “^6.0.2”
   }

3. 如果是自己通过 webpack 配置的项目，一定要在 devServe 中配置 historyApiFallback，以及 output.publicPath 解决 history 模式页面刷新后出现 404 的情况。

   devServer: {
   port,
   host,
   hot: true,
   open: true,
   historyApiFallback:{
   disableDotRule: true
   }
   },

   // 以及 output 中的 publicPath
   output: {
   path: path.resolve(__dirname, “…/dist”),
   filename: “[name].[chunkhash].js”,
   publicPath: ‘/’
   },

使用

在入口文件中直接渲染 Router.tsx

// idex.tsx
import React from "react";
import ReactDOM from "react-dom";
import Router from "./router/Router";
import "./index";

ReactDOM.render(<Router />, document.getElementById("root"));

1. Routes 组件替换 v5 的 Switch 组件；

Route 组件必须使用 Routes 嵌套

// Router.tsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Custo