社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
React Router 4 发布，我能清晰地感觉到来自 Twitter 大家对新版本中其 大量的修改 的不同声音。诚然，我在学习 React Router 4 的第一天，也是非常痛苦的，但是，这并不是因为看它的 API，而是反复思考使用它的 模式和 策略，因为 V4 的变化确实有点大， V3 的功能它都有，除此之外，还增加了一些特性，我不能直接将使用 V3 的心得直接迁移过来，现在，我必须重新审视 router 和 layout components 之间的关系
本篇文章不是把 React Router 4 的 API 再次呈现给读者看，而是简单介绍其中最常用的几个概念，和重点讲解我在实践的过程中发现的比较好的 模式 和 策略
不过，在阅读下文之前，你得首先保证以下的 概念 对你来说 并不陌生
如果你就是那 万中无一 的绝世高手，那么你也可以选择直接 view demo
React Router 的早期版本是將 router 和 layout components 分开，为了彻底搞清楚 V4 究竟有什么不同，我们来写两个简单的 example 就明白了
example app 就两个 routes，一个 home，一个 user
在 V3 中
import React from "react";
import { render } from "react-dom";
import { Router, Route, IndexRoute, Link, browserHistory } from "react-router";
const PrimaryLayout = props =>
<div className="primary-layout">
<header>Our React Router 3 App</header>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/user">User</Link>
</li>
</ul>
<main>
{props.children}
</main>
</div>;
const HomePage = () => <h1>Home Page</h1>;
const UsersPage = () => <h1>User Page</h1>;
const App = () =>
<Router history={browserHistory}>
<Route path="/" component={PrimaryLayout}>
<IndexRoute component={HomePage} />
<Route path="/user" component={UsersPage} />
</Route>
</Router>;
render(<App />, document.getElementById("root"));
上篇文章给大家推荐了一个在线 react 编译器 stackblitz，本篇文章再给大家推荐一个不错的， codesandbox，专门针对 react 且开源，正所谓， 实践是检验真理的唯一标准，这也是一种良好的学习习惯
上面代码中有几个关键的点在 V4 中就不复存在了
我们使用 V4 来实现相同的应用程序对比一下
import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
const PrimaryLayout = () =>
<div className="primary-layout">
<header>Our React Router 4 App</header>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/User">User</Link>
</li>
</ul>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/user" component={UsersPage} />
</main>
</div>;
const HomePage = () => <h1>Home Page</h1>;
const UsersPage = () => <h1>User Page</h1>;
const App = () =>
<BrowserRouter>
<PrimaryLayout />
</BrowserRouter>;
render(<App />, document.getElementById("root"));
注意，我们现在 import 的是 BrowserRouter，而且是从 react-router-dom 引入，而不是 react-router
接下来，我们用肉眼就能看出很多的变化，首先，V3 中的 router 不在了，在 V3 中，我们是将整个庞大的 router 直接丢给 DOM，而在 V4 中，除了 BrowserRouter， 我们丢给 DOM 的是我们的应用程序本身
另外，V4 中，我们不再使用 {props.children} 来嵌套组件了，替代的 <Route>，当 route 匹配时，子组件会被渲染到 <Route> 书写的地方
在上面的 example 中，读者可能注意到 V4 中有 exact 这么一个 props，那么，这个 props 有什么用呢？ V3 中的 routing 规则是 exclusive，意思就是最终只获取一个 route，而 V4 中的 routes 默认是 inclusive 的，这就意味着多个 <Route>可以同时匹配和呈现
还是使用上面的 example，如果我们调皮地删除 exact 这个 props，那么我们在访问 /user 的时候，Home 和 User 两个 Page 都会被渲染，是不是一下就明白了
为了更好地理解 V4 的匹配逻辑，可以查看 path-to-regexp，就是它决定 routes 是否匹配 URL
为了演示 inclusive routing 的作用，我们新增一个 UserMenu 组件如下
const PrimaryLayout = () =>
<div className="primary-layout">
<header>
Our React Router 4 App
<Route path="/user" component={UsersMenu} />
</header>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/user" component={UsersPage} />
</main>
</div>;
现在，当访问 /user 时，两个组价都会被渲染，在 V3 中存在一些模式也可以实现，但过程实在是复杂，在 V4 中，是不是感觉轻松了很多
如果你只想匹配一个 route，那么你也可以使用 <Switch> 来 exclusive routing
const PrimaryLayout = () =>
<div className="primary-layout">
<PrimaryHeader />
<main>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/user/add" component={UserAddPage} />
<Route path="/user" component={UsersPage} />
<Redirect to="/" />
</Switch>
</main>
</div>;
在 <Switch> 中只有一个 <Route> 会被渲染，另外，我们还是要给 HomePage 所在 <Route> 添加 exact，否则，在访问 /user 或 /user/add 的时候还是会匹配到 /，从而，只渲染 HomePage。同理，不知有没同学注意到，我们将 /user/add 放在 /user 前面是保证正确匹配的很有策略性的一步，因为，/user/add 会同时匹配 /user 和 /user/add，如果不这么做，大家可以尝试交换它们两个的位置，看下会发生什么
当然，如果我们给每一个 <Route> 都添加一个 exact，那就不用考虑上面的 策略 了，但不管怎样，现在至少知道了我们还有其它选择
<Redirect> 组件不用多说，执行浏览器重定向，但它在 <Switch> 中时，<Redirect> 组件只会在 routes 匹配不成功的情况下渲染，另外，要想了解 <Redirect> 如何在 non-switch 环境下使用，可以参考下面的 Authorized Route
V4 中也没有 <IndexRoute>，但 <Route exact> 可以实现相同的功能，或者 <Switch> 和 <Redirect> 重定向到默认的有效路径，甚至一个找不到的页面
接下来，你可能很想知道 V4 中是如何实现 嵌套布局 的，V4 确实给我们了很多选择，但这并不一定是好事，表面上，嵌套布局 微不足道，但选择的空间越大，出现的问题也就可能越多
现在，我们假设我们要增加两个 user 相关的页面，一个 browse user，一个 user profile，对 product 我们也有相同的需求，实现的方法可能并不少，但有的仔细思考后可能并不想采纳
第一种，如下修改 PrimaryLayout
const PrimaryLayout = props => {
return (
<div className="primary-layout">
<PrimaryHeader />
<main>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/user" exact component={BrowseUsersPage} />
<Route path="/user/:userId" component={UserProfilePage} />
<Route path="/products" exact component={BrowseProductsPage} />
<Route path="/products/:productId" component={ProductProfilePage} />
<Redirect to="/" />
</Switch>
</main>
</div>
);
};
虽然这种方法可以实现，但仔细观察下面的两个 user 页面，就会发现有点潜在的 问题
const BrowseUsersPage = () => (
<div className="user-sub-layout">
<aside>
<UserNav />
</aside>
<div className="primary-content">
<BrowseUserTable />
</div>
</div>
)
const UserProfilePage = props => (
<div className="user-sub-layout">
<aside>
<UserNav />
</aside>
<div className="primary-content">
<UserProfile userId={props.match.params.userId} />
</div>
</div>
)
userId 通过 props.match.params 获取， props.match 赋予给了 <Route> 中的任何组件。除此之外，如果组件不通过 <Route> 来渲染，要访问 props.match，可以使用 withRouter() 高阶组件来实现
估计大家都发现了吧，两个 user 页面中都有一个<UserNav />，这明显会导致不必要的请求，以上只是一个简单实例，如果是在真实的项目中，不知道会重复消耗多少的流量，然而，这就是由我们以上方式使用路由引起的
接下来，我们再看看另一种实现方式
const PrimaryLayout = props => {
return (
<div className="primary-layout">
<PrimaryHeader />
<main>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/user" component={UserSubLayout} />
<Route path="/products" component={ProductSubLayout} />
<Redirect to="/" />
</Switch>
</main>
</div>
);
};
我们用 2 个 routes 替换之前的 4 个 routes
注意，这里我们没有再使用 exact，因为，我们希望 /user 可以匹配任何以 /user 开始的 route， products 同理
使用这种策略，子布局也开始承担起了渲染 routes 的责任，现在，UserSubLayout 长这样
const UserSubLayout = () =>
<div className="user-sub-layout">
<aside>
<UserNav />
</aside>
<div className="primary-content">
<Switch>
<Route path="/user" exact component={BrowseUsersPage} />
<Route path="/user/:userId"
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_35484341/article/details/80500237
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
