React-router v4教程
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-router v4教程相关的知识,希望对你有一定的参考价值。
参考技术A 在这个教程里,我们会从一个例子React应用开始学习react-router-dom。其中你会学习如何使用 Link 、 NavLink 等来实现跳转, Switch 和 exact 实现排他路由和浏览器路径历史。也许学习react-router最好的办法就是用react-router-dom v4来写一个多页的react应用。这个react应用会包含登录、注册、首页、联系人等页面。但是,首先让我们来看一下react router v4的概念,以及它与v3有什么不同的地方。
v4是react router的一次重写,所以和v3有很多不同的地方。主要有:
react-router-dom 是react-router中用于浏览器的。 react-router 被分为一下几部分:
react-router 是核心部分。 react-router-dom 提供了浏览器使用需要的定制组件。 react-router-native 则专门提供了在原生移动应用中需要用到的部分。所以,如果在本例中实现浏览器开发就只需要安装 react-router-dom 。
如上所说,我们使用react开发web应用,所以只需要安装 react-router-dom 。
在react-router的各种router中, <BrowserRouter> 和 <HashRouter> 是可以在浏览器中使用的。如果你使用的是一个非静态的站点、要处理各种不同的url那么你就需要使用 BrowserRouter 。相反的如果你的server只处理静态的url,那么就使用 HashRouter 。
<Route>组件是react router v4里最有用的组件。背后的使用哲学也很简单,无论何时你需要在匹配某个路径的时候绘制一个组件,那么就可以使用 Route 组件。
Route 组件可以使用如下的属性:
还有其他的一些属性,可以用来代替 component 属性。
多数的时候是用 component 属性就可以满足。但是,某些情况下你不得不使用 render 或 children 属性。
如:
使用组件:
使用 render 属性实现内联绘制:
来看哥更复杂的:
使用 children :
更多关于react-router v4如何匹配路径的内容,请移步 这里 。
通常情况下,我们都会在路径里添加参数。这样方便在不同的组件之间传递一些必要的数据。那么我们如何才能获取到这些传递的参数,并传递给组件中呢?我们只需要在路径的最后加上 /:param 。如:
一旦有路径可以匹配成功,那么就会穿件一个拥有如下属性的对象,并传入绘制的组件里:
Link 是react router v4特有的一个组件。是用来代替上一版的anchor link。使用 Link 可以在React应用的不同页面之间跳转。与unclor会重新加载整个页面不同, Link 只会重新加载页面里和当前url可以匹配的部分。
Link 组件需要用到 to 属性,这个属性的值就是react router要跳转到的地址。如:
当被点击的时候,会跳转到路径: / 。
to 属性的值可以是一个字符串,也可以是一个location(pathname, hash, state和search)对象。比如:
Link 也可以使用 replace 属性,如果点击的话,那么history里的当前领会被replace。
NavLink 是 Link 的一个子类,在Link组件的基础上增加了绘制组件的样式,比如:
现在我们用react router dom来实现第一个demo。
首先,引入必要的组件。比如: Route 和 BrowserRouter 。
接下来,我们创建一些组件和一些html标签。同时我们用react router v4里的 Link 和 NavLink 组件。
然后我们来创建需要的组件:
最后,写 App 组件。
如你所见,react router v4的组件还非常的易用的。
在上例中,我们在 HomePage 组件的路由里使用了属性 exact 。
这是因为v4中的路由默认都是非排他的,这一点和v3的实现思路截然不同。如果没有 exact 属性, HomePage 组件和其他的组件就会同事绘制在页面上。
如,当用户点了登录连接以后, "/" 和 "/login" 都满足匹配条件,对应的登录组件和Home组件就会同时出现在界面上。但是,这不是我们期待的结果,所以我们要给 "/" path加上 exact 属性。
现在我们来看看非排他的路由有什么优点。假如我们有一个子菜单组件需要显示在profile页面出现的时候也出现。我们可以简单的修改 BasicLayout 来实现。
这样我们就会看到对应于 "/me" 路径的组件都绘制出来了。这就是非排他路由的好处。
排他路由是react router v3的默认实现。只有第一个匹配的路由对应的组件会被绘制。这一点也可以用react router v4的 Switch 组件来实现。在 Switch 组件中,只有第一个匹配的路由 <Route> 或者 <Redirect> 会被绘制:
react router v4中,提供了一个 history 对象。这个对象包含了多个api,可以用来操作浏览器历史等。
你也可以在React应用里使用 history 对象的方法:
用另外的方法可以写成:
无论何时你要重定向到另外一个地址的时候,都可以使用 Redirect 组件:
或者,更为简单的:
react router v4让开发react应用变得更加的简单。让react应用内的页面跳转更加简单。你只需要声明一个 BrowserRouter 或者 HashRouter ,然后在它的内部放上一系列的 Route 组件,这些主键只要包含 path 和 component 属性。无论何时有了匹配的路由,那么它就会进行非排他的绘制(所有匹配的路由都会绘制)。你也可以把 Route 放在 Switch 组件里来实现排他的绘制(只有第一个匹配的路由会被绘制)。你可以在路径中传递参数, match 对象会保留这些参数。最后,所有在web中使用的路由组件都包含在 react-router-dom 中。只需要引入 react-router-dom 就可以使用。
原文地址: https://www.techiediaries.com/react-router-dom-v4/
React教程(十四) : React-router 实现原理
之前讲述了React-router的使用方法,这一篇讲述其实现原理
1:react-router的Link组件会被翻译为a标签,
其query、to、hash等属性都会被翻译为href属性
2:
以上是关于React-router v4教程的主要内容,如果未能解决你的问题,请参考以下文章
使用 react-router v4 和 express.js 进行服务器渲染