之前在开发React应用的时候，使用react-router总有些奇怪的感觉，觉得React的路由做得没有vue.js完美。最近想到react-router-dom已经有6版本了，于是决定体验一把。
首先创建一个干净的React应用
yarn create react-app react-router-dom-6-demo
查看react-router-dom所有版本
npm view react-router-dom versions
详细的版本列表如下，其中省略了部分目前来说不重要的版本，而6.0版本目前已经进行到beta测试
[
...
'4.0.0',
...
'5.0.0',
'5.0.1',
'5.1.0',
'5.1.1',
'5.1.2',
'5.2.0',
'6.0.0-alpha.0',
'6.0.0-alpha.1',
'6.0.0-alpha.2',
'6.0.0-alpha.3',
'6.0.0-alpha.4',
'6.0.0-alpha.5',
'6.0.0-beta.0'
]
那么废话不多说，直接下载最后一个版本6.0.0-beta.0
cd react-router-dom-6-demo
yarn add react-router-dom@next
然后打开项目文件，稍作整理，只留下最简洁的内容，保留的文件如下：
然后，尝试从react-router-dom中import部分组件的时候，直接爆了个错误
不要慌，直接手动安装history依赖库，即可立即解决问题。
yarn add history
另外，经过一顿尝试，在将react-router-dom版本切换到6.0.0-alpha.5的时候，一切都安静了。
yarn remove react-router-dom react-router
yarn add [email protected] [email protected]
好吧，环境已经准备好，这还只是开始，接下来就开始动手做一些路由相关的测试。
首先准备以下页面：
首先是主页面mian和欢迎页welcome，如果已经登录则进入主页面，否则进去欢迎页（这里以sessionStorage中是否存在token区分是否已登录），欢迎页中点击登录会记录token并跳转至主页面。
接着对App.js进行改造
import React from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Main from "./pages/main";
import Welcome from "./pages/welcome";
import NotFound from "./pages/not-found";
import Page1 from "./pages/page1";
import Page11 from "./pages/page1-1";
import Page12 from "./pages/page1-2";
import Page13 from "./pages/page1-3";
import Page2 from "./pages/page2";
import Page3 from "./pages/page3";
const App = () => {
return (
);
};
export default App;
function Test() {
return sessionStorage.getItem("token") ? : 另外主页面和欢迎页代码如下：
main.jsx
import React from "react";
import { useNavigate, Outlet } from "react-router-dom";
const Main = (props) => {
const navigate = useNavigate();
const nav = (path) => {
navigate(path);
}
return (
main page
);
};
export default Main;
welcome.jsx
import React from "react";
import { useNavigate } from "react-router-dom";
const Welcome = (props) => {
const navigate = useNavigate();
const login = () => {
sessionStorage.setItem("token", "xx");
navigate("/", { replace: true });
};
return (
);
};
export default Welcome;
mian页面中包含三个子组件page1、page2、page3，而page1中又包含了三个子页面。
page1.jsx
import React from "react";
import { Outlet } from "react-router-dom";
const Main = (props) => {
return (
page 1
);
};
export default Main;
最终页面层次结构如下
最后做个总结，react-router-dom@6相比之前的版本存在以下一些变化（以上demo中涉及到的）
1.BrowserRouter保持不变；
2.Switch替换成了Routes；
3.Route中统一使用element属性，去掉原来的component和render；
4.子路由可以省略上级路由了，比如/page1/page1-1以往需要写完整的Path，而目前可以继承上级页面的路由了，甚至斜线都可以省略；
5.useNavigate取代useHistory，并且api也有相应的变化；
6.新增了Outlet，作用相当于{this.props.children}。
总而言之，从主观上看，react-router-dom@6新版本的命名更加容易理解，使用更为简洁了，期待正式版本赶紧发布。