前言
18年初,React Router的主要开发人员创建一个名为Reach Router的轻量级替代方案。
原来是相互抗衡的,却没想React Router直接拿来合并(真香!)
目前 v6已是测试最后一版,估计新的特性不出意外就是下面这些了。
- <switch>重命名为<routes>。/<routes>/<switch>
- <route>的新特性变更。/<route>
- 嵌套路由变得更简单。
- 用useNavigate代替useHistory。
- 新钩子useRoutes代替react-router-config。
- 大小减少:从20kb到8kb
1. <switch>重命名为<routes>/<switch>
该顶级组件将被重命名。但是,其功能大部分保持不变(嗨,瞎折腾)。
<code>// v5
<switch>
<route><home>/<route>
<route><profile>/<route>
/<switch>
// v6
<routes>
<route>} />
<route>} />
/<routes>
复制代码/<code>
2. <route>的新特性变更/<route>
component/render被element替代
总而言之,简而言之。就是变得更好用了。
<code>import Profile from './Profile';
// v5
<route>
<route> path=":userId"
render={routeProps => (
<profile>
)}
/>
// v6
<route>} />
<route>} />
复制代码/<route>/<code>
3. 嵌套路由变得更简单
具体变化有以下:
- <route> 已更改为接受子路由。/<route>
- 比<route>和<route>更简单的匹配规则。/<route>/<route>
- <route> 路径层次更清晰。/<route>
3.1 简化嵌套路由定义
v5中的嵌套路由必须非常明确定义,且要求在这些组件中包含许多字符串匹配逻辑(活久见啊,终于意识到这个问题了。)
且看之前的处理:
<code>// v5
import {
BrowserRouter,
Switch,
Route,
Link,
useRouteMatch
} from 'react-router-dom';
function App() {
return (
<browserrouter>
<switch>
<route>
<route>
/<switch>
/<browserrouter>
);
}
function Profile() {
let { path, url } = useRouteMatch();
return (
<switch>
<route>
<myprofile>
/<route>
<route>
<othersprofile>
/<route>
/<switch>
);
}
复制代码/<code>
而在v6中,你可以删除字符串匹配逻辑。不需要任何useRouteMatch()!
<code>// v6
import {
BrowserRouter,
Routes,
Route,
Link,
Outlet
} from 'react-router-dom';
function App() {
return (
<browserrouter>
<routes>
<route>} />
<route>} />
/<route>/<routes>
/<browserrouter>
);
}
function Profile() {
return (
<routes>
<route>} />
<route>} />
/<routes>
);
}
复制代码/<code>
当然,还有更酸爽的操作,直接在路由里定义<route>的<route>,然后用接下来的一个新API:Outlet/<route>/<route>
3.2 新API:Outlet
这玩意儿,像极了{this.props.children},具体用法看以下例子:
<code>function App() {
return (
<browserrouter>
<routes>
<route>} />
<route>}>
<route>} />
<route>} />
/<routes>
/<browserrouter>
);
}
function Profile() {
return (
{/*
将直接根据上面定义的不同路由参数,渲染<myprofile>或<othersprofile>
*/}
<outlet>
)
}
复制代码/<code>
3.3 多个<routes>
以前,我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由,这将帮助我们基于不同的路由管理多个应用程序逻辑。
<code>import React from 'react';
import { Routes, Route } from 'react-router-dom';
function Dashboard() {
return (
Look, more routes!
<routes>
<route>} />
<route>} />
/<routes>
);
}
function App() {
return (
<routes>
<route>} />
<route>} />
/<routes>
);
}
复制代码/<code>
4. 用useNavigate代替useHistory
从一目了然改到双目失明。。。
总感觉React Router团队有点儿戏。。。
<code>// v5
import { useHistory } from 'react-router-dom';
function MyButton() {
let history = useHistory();
function handleClick() {
history.push('/home');
};
return <button>Submit/<button>;
};
复制代码/<code>
现在,history.push()将替换为navigation():
<code>// v6
import { useNavigate } from 'react-router-dom';
function MyButton() {
let navigate = useNavigate();
function handleClick() {
navigate('/home');
};
return <button>Submit/<button>;
};
复制代码/<code>
history的用法也将被替换成:
<code>// v5
history.push('/home');
history.replace('/home');
// v6
navigate('/home');
navigate('/home', {replace: true});
复制代码/<code>
5. 新钩子useRoutes代替react-router-config。
感觉又是一波强行hooks,但还是相对于之前简洁了一些。。。
<code>function App() {
let element = useRoutes([
{ path: '/', element: <home> },
{ path: 'dashboard', element: <dashboard> },
{ path: 'invoices',
element: <invoices>,
children: [
{ path: ':id', element: <invoice> },
{ path: 'sent', element: <sentinvoices> }
]
},
// 重定向
{ path: 'home', redirectTo: '/' },
// 404找不到
{ path: '*', element: <notfound> }
]);
return element;
}
复制代码/<code>
6. 大小减少:从20kb到8kb
React Router v6给我们带来方便的同时,还把包减少了一半以上的体积。。。
感觉可以去看一波源码了。。。
7. 迁移及其它重要修复...
官方的迁移指南在这里:React Router v6迁移指南
https://github.com/ReactTraining/react-router/blob/dev/docs/advanced-guides/migrating-5-to-6.md
其实上面所列的新特性,基本就是迁移的全部内容了。
基础的起手式就是更新包:
<code>$ npm install react-router@6 react-router-dom@6
# or, for a React Native app
$ npm install react-router@6 react-router-native@6
复制代码/<code>
其中我觉得特别需要注意的一点是:React Router v6使用简化的路径格,仅支持2种占位符:动态:id样式参数和*通配符
以下都是v6中的有效路由路径:
<code>/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*
/files-*
复制代码/<code>
使用RegExp正则匹配的路径将无效:
<code>/users/:id?
/tweets/:id(\\d+)
/files/*/cat.jpg
复制代码/<code>
v6中的所有路径匹配都将忽略URL上的尾部"/"。实际上,<route>已被删除并且在v6中无效。这并不意味着您不需要使用斜杠。/<route>
在v5版本之前的路径,存在路由歧义
- 当前路径:"/users",则<link>将跳转
- 当前路径:"/users/",则<link>将跳转
React Router v6修复了这种歧义,取消了尾部"/":
- 当前路径:"/users",则<link>将跳转
- 当前路径:"/users",则<link>将跳转
其形式更像命令行cd的用法:
<code>// 当前路径为 /app/dashboard
<link> // /<code>
结语
参考文章:
A Sneak Peek at React Router v6
What’s new in React Router v6
React Router v6 in Three Minutes Migrating
React Router v5 to v6
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我一个小忙:
- 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
閱讀更多 Echa攻城獅 的文章