react-router-dom
react-router-dom
v6
整体体验相对于v5
,体验要好更多,最大的一个改变,就是曾经的Route
不可嵌套,整个路由配置必须拆分成若干小块,除非通过react-router-config
这种插件,才可以实现对整个路由的管理,然而现在,不需要任何插件就可实现对路由配置的管理。
官网地址: react-router
当前例子,根据分支对应例子:react-router-dom-v6-example
v6
与 v5
的区别
当前环境
-
安装
npm install --save react-router-dom history
-
react
,react-router-dom
以及相关插件版本。“dependencies”: {
“history”: “^5.1.0”,
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”,
“react-router-dom”: “^6.0.2”
} -
如果是自己通过
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