react 路由系统

react-router 中的三大组件

react-router中的组件就是react中的组件，只不过它们被添加了一些特殊的逻辑而已。

• Router Router至关于一个容器，不会被渲染出来。你的其余组件都要放在Router中才能使用到react-router的功能。根据功能的不一样，Router还分为BrowserRouter，MemoryRouter等。
• Link Link被渲染称一个a标签，一般以声明式的方式被定义在应用程序中。
• Route Route包含一个path，并指明了在path与URL匹配时要渲染的组件。

Router

若是说咱们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而Link就表明了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。

先来讲一说BrowserRouter。BrowserRouter主要使用在浏览器中，也就是WEB应用中(废话，看名字就知道了)。它利用HTML5 的history API来同步URL和UI的变化。当咱们点击了程序中的一个连接以后,BrowserRouter就会找出与这个URL匹配的Route，并将他们渲染出来。 既然BrowserRouter是用来管理咱们的组件的，那么它固然要被放在最顶级的位置，而咱们的应用程序的组件就做为它的一个子组件而存在。

import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.body);

有时候咱们的应用只是整个系统中的一个模块，好比一个使用了ASPNET MVC中的area的后台管理模块，应用中的URL老是以 http://localhost/admin/ 开头。这种状况下咱们总不能每次定义Link和Route的时候都带上admin吧？react-router已经考虑到了这种状况，因此为咱们提供了一个basename属性。为BrowserRouter设置了basename以后，Link中就能够省略掉admin了，而最后渲染出来的URL又会自动带上admin。

<BrowserRouter basename="/admin"/> ... <Link to="/home"/> // 被渲染为 <a href="/admin/home"> ... </BrowserRouter>

对于WEB应用，BrowserRouter是咱们的首选。可是这里还有一些Browser Router其余的兄弟姐妹，在其余的一些状况下你或许会用获得。

• HashRouter 这个内部使用window.location.hash，因为这里存在一些问题，所以官方推荐使用BrowserRouter来替代。
• MemoryRouter 主要用在ReactNative这种非浏览器的环境中，所以直接将URL的history保存在了内存中。
• StaticRouter 主要用于服务端渲染。

Link

Link就像是一个个的路牌，为咱们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能，定义的Link最终会被渲染成一个a标签。Link使用to这个属性来指明目标组件的路径，能够直接使用一个字符串，也能够传入一个对象。

// 字符串参数 <Link to="/query">查询</Link> // 对象参数 <Link to={{ pathname: '/query', search: '?key=name', hash: '#hash' }}>查询</Link>

Link提供的功能并很少，好在咱们还有NavLink能够选择。NavLink是一个特殊版本的Link，可使用activeClassName来设置Link被选中时被附加的class，使用activeStyle来配置被选中时应用的样式。此外，还有一个exact属性,此属性要求location彻底匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。

// 选中后被添加class selected <NavLink to={'/'} exact activeClassName='selected'>Home</NavLink> // 选中后被附加样式 color:red <NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>

Route

Route应该是react-route中最重要的组件了，它的做用是当location与Route的path匹配时渲染Route中的Component。若是有多个Route匹配，那么这些Route的Component都会被渲染。

与Link相似，Route也有一个exact属性，做用也是要求location与Route的path绝对匹配。

// 当location形如 http://location/时，Home就会被渲染。 // 由于 "/" 会匹配全部的URL，因此这里设置一个exact来强制绝对匹配。 <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> 

Route的三种渲染方式

1. component

这是最经常使用也最容易理解的方式，给什么就渲染什么。

1. render

render的类型是function，Route会渲染这个function的返回值。所以它的做用就是附加一些额外的逻辑。

<Route path="/home" render={() => { console.log('额外的逻辑'); return (<div>Home</div>); }/>

1. children

这是最特殊的渲染方式。1、它同render相似,是一个function。不一样的地方在于它会被传入一个match参数来告诉你这个Route的path和location匹配上没有。2、第二个特殊的地方在于，即便path没有匹配上，咱们也能够将它渲染出来。秘诀就在于前面一点提到的match参数。咱们能够根据这个参数来决定在匹配的时候渲染什么，不匹配的时候又渲染什么。

// 在匹配时，容器的calss是light，<Home />会被渲染 // 在不匹配时，容器的calss是dark，<About />会被渲染 <Route path='/home' children={({ match }) => ( <div className={match ? 'light' : 'dark'}> {match ? <Home/>:<About>} </div> )}/> 

全部路由中指定的组件将被传入如下三个props。

1. match.
2. location.
3. history.

这里主要说下match.params.透过这个属性，咱们能够拿到从location中解析出来的参数。固然，若是想要接收参数，咱们的Route的path也要使用特殊的写法。

以下示例，三个Link是一个文章列表中三个连接，分别指向三篇id不一样的文章。而Route用于渲染文章详情页。注意path='/p/:id' ，location中的对应的段会被解析为id=1 这样的键值。最终这个键值会做为param的键值存在。Route中的组件可使用this.props.match.params.id来获取，示例中使用告终构赋值。

<Link to='/p/1' /> <Link to='/p/2' /> <Link to='/p/3' /> ...... <Route path='/p/:id' render={(match)=<h3>当前文章ID:{match.params.id}</h3>)} />

Redirect

当这个组件被渲染是，location会被重写为Redirect的to指定的新location。它的一个用途是登陆重定向，好比在用户点了登陆并验证经过以后，将页面跳转到我的主页。

<Redirect to="/new"/>