本文共 7978 字,大约阅读时间需要 26 分钟。
首先,这篇文章的目的并不是为了重新叙述一遍React-Router4的文档。接下来我要说的内容,将会覆盖React-Router的大多数API,但是真正的目的是揭开React-Router4成功的模式和策略。
在开始本文之前,你需要了解一些JS的概念:
如果你喜欢直接看demo来了解,请点击查看。
React-Router早一些的版本中,是在一个地方统一地管理所有路由规则,将它们与布局组件分离。当然,路由也可以被拆分和组织到几个文件当中,但是从概念上来说,路由本身是一个单元,基本上是一个美化的配置文件。
要了解版本4到底有哪些不同,最好的方式可能是用每一个版本写一个两个页面的应用,并进行比较。示例的应用只有home页面和user页面。
以下是版本3的写法:
import { Router, Route, IndexRoute } from 'react-router'const PrimaryLayout = props => ()const HomePage =() =>Our React Router 3 App {props.children} Home Pageconst UsersPage = () =>Users Pageconst App = () => ()render( , document.getElementById('root'))复制代码
版本3中的一些概念在版本4中可能不再适用:
<Route>
组件的嵌套派生的React-Router4不在提倡集中管理路由。相反,路由规则存在于布局和UI组件之中。举例来说,同样的路由在V4版本中可能是这样的:
import { BrowserRouter, Route } from 'react-router-dom'const PrimaryLayout = () => ()const HomePage =() =>Our React Router 4 App Home Pageconst UsersPage = () =>Users Pageconst App = () => ()render( , document.getElementById('root'))复制代码
新API概念: 由于我们的应用是针对浏览器的,因此我们需要将它包装在V4提供的
<BrowserRouter>
组件中。我们也注意到,使用路由时我们引入的是react-router-dom
,这意味着你在开发时应该安装react-router-dom
而不是react-router
。这里有个小小的暗示,既然它的名字是react-router-dom
,这意味着它也提供了原生版本。
在使用V4版本构建的应用中,最显著的一点是“路由”似乎消失了。在V3中,路由是我们渲染到dom的一个大玩意儿,它统筹了我们的整个项目。现在,除了<BrowserRouter>
以外,第一个抛进dom的是我们的应用本身。
另一个在V4示例中没有展现的V3的用法是使用props.children来嵌套组件。这是因为在V4中,只要路由匹配到了,<Router>组件在哪里编写,子组件就会渲染在哪里。
在先前的例子中,你可能已经注意到了exact
属性。那么它到底是干嘛的呢?在V3中,路由规则是独一无二的,这意味着最终只有一个路由会匹配到。但是在V4中,路由是包含式的,这意味着可能会有多个路由同时匹配到并且渲染。
在先前的例子中,我们试图依靠路径来区分渲染home页面或者user页面。如果把exact
属性从该示例中移除,那么在浏览‘/user’路径时,home页面和user页面会同时渲染。
想要更好的了解匹配规则,您可以查看,React-Router4 就是使用它来匹配路由的。
为了更好地演示包含式路由起到了什么作用,我们实现一个这样的功能:只有在user页面我们才在头部添加一个UserMenu
列表。
const PrimaryLayout = () => ()复制代码Our React Router 4 App
现在,当用户浏览‘/users’时,所有的组件都会渲染。在V3中,通过某些方式我们似乎也能实现相同的功能,但是实现起来显然更为复杂。而V4的包含式组件让这一切变得轻松写意。
如果你只想匹配一个路由,使用<Switch>
组件来实现。<Switch>
组件只会渲染匹配到的第一个路由。
const PrimaryLayout = () => ()复制代码
在<Switch>
中的路由只有一个会被渲染。我们仍然需要在home页面的路由上添加exact属性,否则,当我们访问‘/users’或者‘/users/add’时,home页面将会首先匹配到。事实上,在使用排他性路由时,路由的位置排列是最为关键的事,传统路由一直如此。我们把‘/users/add’排列在‘/users’之前以保证正确的匹配路由。因为‘/users/add’会匹配‘/users’和‘/users/add’,把‘/users/add’放在前面是最好的。
当然,如果你使用了exact
属性,那放在哪儿都无所谓,但至少我们还有选择。
在遇到<Redirect>
组件时,总是会做浏览器重定向,但是如果它在<Switch>
组件中,那么只有当其他路由都没有匹配到时,才会重定向。
在V4中我们用exact
属性代替了<IndexRoute>
来做同样的事。在没有路由匹配到时,使用<Redirect>
来重定向到默认页面的路径,或者404页面。
现在你可能已经开始思考如何实现嵌套布局了。我原本以为我不会纠结于这个概念,但我没有...V4提供了很多选择,这就是为什么V4如此强大。但是,多样的选择意味着我们可能选择并不理想的方案。表面上看来,嵌套布局很简单,但是根据你的选择不同,你可能会遇到一些麻烦因为你组织路由的方式。
想象这样一个场景,我们需要一个‘浏览用户’的页面以及‘用户信息’的页面。对于产品页面我们也有类似需求。用户和产品都需要一个子布局,并且子布局都是唯一特有的。举例来说,每一个子布局拥有不同的导航卡。我们有几种不同的方式来解决这个问题,有些比较好有些则不太好。第一种方案可能并不是那么好,但我还是想让你们看一看,以免以后踩入这个坑。第二种方案就显得更好一些。
const PrimaryLayout = props => { return ()}const BrowseUsersPage = () => ( )const UserProfilePage = props => ( )复制代码
新API概念: 任何由
<Route>
渲染的组件,V4都会提供props.match
。就像你看到的,userId这个参数是有props.match.params
提供的。了解更多。如果一个组件并不是直接通过<Route>
组件渲染的,但是却要用到props.match
,那么我们可以借助withRouter()
这个高阶组件。
实现上来说,第一种方案并没有什么问题。但是我们仔细观察一下,会发现UserProfilePage
和BrowserUsersPage
的布局是一样的,不同的只是UserProfile
和BrowserUserTable
。这种实现方法会导致一些冗余代码,并且在UserProfilePage
和BrowserUsersPage
之间切换时,UserNav
组件是需要完全重新渲染走一遍生命周期的。很明显这是可以避免的。
以下是更好的实现方式:
const PrimaryLayout = props => { return ()}const UserSubLayout = () => ( )复制代码
和之前实现方式不同的是,我们的路由从4个变成了2个。BrowseUsersPage
和UserProfilePage
组件只负责渲染不同的部分,作为UserSubLayout
的子组件。需要注意的一点是,不论你路由嵌套多深,还是需要写完整路径去匹配。如果你不想重复书写路径或者方便统一修改路径,你可以使用props.match.path
:
const UserSubLayout = props => ()复制代码
正如我们所见,props.match在获取userId这类参数和简化路由书写方面很有用处。match对象提供了一些属性:match.params
,match.path
,match.url
。
第一眼我们并不能清楚的区分这两者。控制台打印时,多数情况下也是相同的结果。举例来说,当浏览器路径是‘/users’时,match.path
和match.url
打印输出的是相同的值。
const UserSubLayout = ({ match }) => { console.log(match.url) // output: "/users" console.log(match.path) // output: "/users" return ()}复制代码
现在我们还是分不清这两者的区别,但是,如果我们用嵌套的路由,特别是带有参数的匹配模式,在更深一层的组件中打印,我们就能看到区别。比如我们浏览的是‘/users/5’这个路径,match.url
返回的是‘/users/5’,而match.path
返回的是‘/users/:userId’。这样就一目了然了,match.url
返回的是具体的路由地址字符串,而match.path
返回的是路由匹配模式的字符串。
在用<Route>
做嵌套路由时,建议使用match.path
,因为你可能在你的子组件中需要使用match.param
对象,在<Link>
组件做路由跳转时,使用match.url
。
假设现在我们需要一个编辑页面对用户信息进行编辑,那此页面的路由规则应该类似于‘/users/:userId/edit’。那么问题来了,前面的例子中,用户信息页面的路由匹配规则是/users/:userId
,当我们访问‘/users/5/edit’的时候,将会首先匹配到用户信息页面而不是编辑页。那是否意味着我们要像之前做的那样,在原有的信息页面同时添加一个编辑的子页面,再去匹配呢?并不一定。我们可以通过将‘/users/:userId/edit’规则放在/users/:userId
之前来达到此效果。或者对/users/:userId
进行进一步约定,比如限制:userId为数字:users/:userId(\\d+)
。
const UserSubLayout = ({ match }) => ()复制代码
在我们的项目中,根据用户的登录状态来限制用户访问某些路由的功能是很常见的。让授权页面(应用程序的主要页面)和未授权页面(比如登录页面以及忘记密码页面)拥有不同的UI和感受也是常见的需求。
class App extends React.Component { render() { return () }}复制代码
这种方法有几个关键点。首先,根据我们所处的应用程序的哪个部分,我在两个顶级布局之间进行选择。访问路径,如“/auth/login”或“/auth/forget-password”将使用未经授权的布局。当用户登录时,我们将保证所有路径都有一个' /app '前缀,它使用AuthorizedRoute
组件来确定用户是否登录。如果用户试图访问以' /app '开头的页面,但他们没有登录,他们将被重定向到登录页面。
但是AuthorizedRoute
并不是V4本身提供的,而是我自己实现的。V4中一个惊人的新特性是能够为特定目的创建自己的路由。不同于通过传递一个组件属性到<Route>
,而是传递一个rendr
回调:
class AuthorizedRoute extends React.Component { componentWillMount() { getLoggedUser() } render() { const { component: Component, pending, logged, ...rest } = this.props return ({ if (pending) return Loading...return logged ?: }} /> ) }}const stateToProps = ({ loggedUserState }) => ({ pending: loggedUserState.pending, logged: loggedUserState.logged})export default connect(stateToProps)(AuthorizedRoute)复制代码
你的登录策略可能和我的并不一样,我用一个网络请求getLoggedUser()
去获取状态并把pending和logged的值插入redux
管理的状态中。pending意味着请求还没结束。
点击你可以查看完整的登录限制的代码实现。
React-Router V4还有其他更多炫酷的特性。最后,我们来了解一些小特性,以防遇到时犯迷糊。
<Link>
和 <NavLink>
在V4中,有两种方式可以将锚点和路由集成:<Link>
和<NavLink>
。
<NavLink>
的原理和<Link>
一样,不同的是,<NavLink>
能根据浏览器URL是否匹配从而提供额外的样式定制。详情可以在线查看该。部分代码如下:
const PrimaryHeader = () => ()复制代码 Welcome to our app!
当<NavLink>
匹配到当前URL时,它允许我们在此<NavLink>
上添加一个自定义的class,以便控制样式。
在V4中已经没有方式可以直接得到URL的查询字符串了。在我看来,做出这个决定是因为对于如何处理复杂的查询字符串没有标准。因此,v4没有在模块中引入相关方法,而是决定让开发人员选择如何处理查询字符串。这是一件好事。
就我个人而言,我使用sindresorhus大神()编写的模块来处理查询字符串。
V4最出色的一点是几乎所有的东西都是一个React
组件,包括<Route>
。路由再也不是什么魔法,我们可以在任何需要的时候有条件的渲染它们。想象一下,当满足某些条件时,您的应用程序的整个部分都可用于路由。当这些条件不满足时,我们可以删除路由。我们甚至可以做一些炫酷的事,比如递归路由。
React-Router4
变得更为简单了,因为万物皆组件。