// 当location形如 时，Home就会被渲染。 // 因为 "https://www.jb51.net/" 会匹配所有的URL，所以这里设置一个exact来强制绝对匹配。 <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/about" component={About}/>
Route的三种渲染方式
component
这是最常用也最容易理解的方式，给什么就渲染什么。
render
render的类型是function，Route会渲染这个function的返回值。因此它的作用就是附加一些额外的逻辑。
<Route path="/home" render={() => { console.log('额外的逻辑'); return (<div>Home</div>); }/>
children
这是最特殊的渲染方式。一、它同render类似,是一个function。不同的地方在于它会被传入一个match参数来告诉你这个Route的path和location匹配上没有。二、第二个特殊的地方在于，即使path没有匹配上，我们也可以将它渲染出来。秘诀就在于前面一点提到的match参数。我们可以根据这个参数来决定在匹配的时候渲染什么，不匹配的时候又渲染什么。
// 在匹配时，容器的calss是pght，<Home />会被渲染 // 在不匹配时，容器的calss是dark，<About />会被渲染 <Route path='/home' children={({ match }) => ( <div className={match ? 'pght' : 'dark'}> {match ? <Home/>:<About>} </div> )}/>
所有路由中指定的组件将被传入以下三个props。
match.
location.
history.
这里主要说下match.params.透过这个属性，我们可以拿到从location中解析出来的参数。当然，如果想要接收参数，我们的Route的path也要使用特殊的写法。
如下示例，三个pnk是一个文章列表中三个链接，分别指向三篇id不同的文章。而Route用于渲染文章详情页。注意path='/p/:id' ，location中的对应的段会被解析为id=1 这样的键值。最终这个键值会作为param的键值存在。Route中的组件可以使用this.props.match.params.id来获取，示例中使用了结构赋值。
<pnk to='/p/1' /> <pnk to='/p/2' /> <pnk to='/p/3' /> ...... <Route path='/p/:id' render={(match)=<h3>当前文章ID:{match.params.id}</h3>)} />
Redirect
当这个组件被渲染是，location会被重写为Redirect的to指定的新location。它的一个用途是登录重定向，比如在用户点了登录并验证通过之后，将页面跳转到个人主页。
<Redirect to="/new"/>
Router中常用的组件基本上都介绍了一遍，不过也只是蜻蜓点水而已。如果想更透彻的理解路由系统，建议还是去翻看官方文档并且试着去用一用。文中给出的示例也是非常精简的片段，仅仅作为参考。
以上这篇简单谈谈React中的路由系统就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: