import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
 <BrowserRouter>
  <App/>
 </BrowserRouter>,
 document.body);

<BrowserRouter basename="/admin"/>
 ...
 <pnk to="/home"/> // 被渲染为 <a href="/admin/home" rel="external nofollow" >
 ...
</BrowserRouter>

// 字符串参数
<pnk to="/query">查询</pnk>

// 对象参数
<pnk to={{
 pathname: '/query',
 search: '"htmlcode">

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


Route
Route应该是react-route中最重要的组件了，它的作用是当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配，那么这些Route的Component都会被渲染。
与pnk类似，Route也有一个exact属性，作用也是要求location与Route的path绝对匹配。


// 当location形如 http://location/时，Home就会被渲染。
// 因为 "/" 会匹配所有的URL，所以这里设置一个exact来强制绝对匹配。
<Route exact path="/" 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 "htmlcode">

<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中的路由系统就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。