前言
18年初,React Router
的主要开发人员创建一个名为Reach Router
的轻量级替代方案。
原来是相互抗衡的,却没想React Router
直接拿来合并(真香!)
目前 v6
已是测试最后一版,估计新的特性不出意外就是下面这些了。
<Switch>
重命名为<Routes>
。<Route>
的新特性变更。- 嵌套路由变得更简单。
- 用
useNavigate
代替useHistory
。 - 新钩子
useRoutes
代替react-router-config
。 - 大小减少:从
20kb
到8kb
1. <Switch>
重命名为<Routes>
该顶级组件将被重命名。但是,其功能大部分保持不变(嗨,瞎折腾)。
// v5
<Switch>
<Route exact path="/"><Home /></Route>
<Route path="/profile"><Profile /></Route>
</Switch>
// v6
<Routes>
<Route path="/" element={<Home />} />
<Route path="profile/*" element={<Profile />} />
</Routes>
2. <Route>
的新特性变更
component/render
被element
替代
总而言之,简而言之。就是变得更好用了。
import Profile from './Profile';
// v5
<Route path=":userId" component={Profile} />
<Route
path=":userId"
render={routeProps => (
<Profile routeProps={routeProps} animate={true} />
)}
/>
// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />
3. 嵌套路由变得更简单
具体变化有以下:
<Route children>
已更改为接受子路由。- 比
<Route exact>
和<Route strict>
更简单的匹配规则。 <Route path>
路径层次更清晰。
3.1 简化嵌套路由定义
v5
中的嵌套路由必须非常明确定义,且要求在这些组件中包含许多字符串匹配逻辑(活久见啊,终