提起路由,首先想到的就是ASPNET MVC里面的路由系统,通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面。前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL。本篇文章要介绍的是反应中经常使用到的路,由react-router主要使用HTML5 API来的历史同步你的UI和URL。
react-router的最新版本是v4.1.1,由于4.0版本和之间的版本API变化较大,所以本篇文章的内容并不能应用到之前的版本中。
要注意react-router有react-router-dom和react-router-native的区别。前者是用于开发网络应用的,而后者适用于移动应用的,本文所介绍的是react-router-dom。
react-router中的组件就是反应中的组件,只不过它们被添加了一些特殊的逻辑而已。
路由器路由器相当于一个容器,不会被渲染出来。你的其他组件都要放在路由器中才能使用到react-router的功能,根据功能的不同,路由器还分为BrowserRouter, MemoryRouter等。
pnk pnk被渲染称一个一个标签,通常以声明式的方式被定义在应用程序中。
路线路线包含一个路径,并指明了在URL路径与匹配时要渲染的组件。
<强>路由器
如果说我们的应用程序是一座小城的话,那就么路线是一座座带有门牌号的建筑物,而pnk就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错路由器就是这个老司机。
先来说一说BrowserRouter.BrowserRouter主要使用在浏览器中,也就是WEB应用中(废话,看名字就知道了)。它利用HTML5 API来的历史同步URL和UI的变化。当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的路线,并将他们渲染出来,既然BrowserRouter是用来管理我们的组件的,那么它当然要被放在最顶级的位置,而我们的应用程序的组件就作为它的一个子组件而存在。
有时候我们的应用只是整个系统中的一个模块,比如一个使用了ASPNET MVC中的区域的后台管理模块,应用中总的URL是http://localhost/admin/以开头。这种情况下我们总不能每次定义pnk和路线的时候都带上管理吧? react-router已经考虑到了这种情况,所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后,pnk中就可以省略掉管理了,而最后渲染出来的URL又会自动带上管理。
对于网络应用,BrowserRouter是我们的首选。但是这里还有一些浏览器路由器其他的兄弟姐妹,在其他的一些情况下你或许会用得到。
HashRouter这个内部使用window.location.hash,由于这里存在一些问题,因此官方推荐使用BrowserRouter来替代。
MemoryRouter主要用在ReactNative这种非浏览器的环境中,因此直接将URL的历史保存在了内存中。
staticroute主要用于服务端渲染。
<强>链接
链接就像是一个个的路牌,为我们指明组件的位置.pnk使用声明式的方式为应用程序提供导航功能,定义的链接最终会被渲染成一个一个标签.pnk使用,这个属性来指明目标组件的路径,可以直接使用一个字符串,也可以传入一个对象。
链接提供的功能并不多,好在我们还有Navpnk可以选择.Navpnk是一个特殊版本的链接,可以使用activeClassName来设置pnk被选中时被附加的类,使用activeStyle来配置被选中时应用的样式。此外,还有一个确切的属性,此属性要求位置完全匹配才会附加类和风格。这里说的匹配是指地址栏中的URl和这个链接的指定的位置相匹配。
