一：导入及基础用法
react router包含三类组件：路由组件，路由匹配组件，导航组件
import { BrowerRouter,Route,Link } from “react-router-dom”
路由组件
分两种：browser和HashRouter,服务器响应请求用BrowserRouter，静态文件响应用HashRouter（一般都是BrowserRouter)
路由器配组件
分两种：Route和Switch
Route用来写具体说到每一个路由的跳转，Switch用来把多个Route组合到一起。可以不放在一起，放在一起Switch将会迭代其所有元素，并且仅渲染当前路径匹配的第一个元素。
理解：
代码是这样的:

如果路径是localhost:3000/#/about/contact,那么Home,About,Contact都会渲染，
如果代码加上<Switch>：

<Switch>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

同样的路径只会渲染{Home}(其第一个，如果把放在第一个就会渲染About,如果想要无视书写顺序直接只匹配到Contact不匹配前面的可以在里面加上exact,即这样如果路径是：localhost:3000/#/contact,就只会匹配到Contact,不匹配Home了。
关于<Route>:
<Route>有三种属性：children,component和render，children不常用。
component和render都可以用于渲染组件，区别在于如果单纯只为了渲染组件，不传递或者改变其状态的话，用component,如果要在挂载的时候就传递参数的话用render。
eg:

<Route path="/componentUser/:id" component={ComponentUser}/>
   <Route path="/renderUser/:id" render={
({match}) => (<RenderUser key={match.params.id} userId={match.params.id}/>)  }/>

导航组件
用法：<Link to="/">Home</Link>
link中写了在这里要跳转的地址，router中写这个地址具体加载那个组件。
Link to="/"是页面最上面导航栏中会写入的路径，在router中会比对，当router中的path与导航栏中的路径一样的话，加载对应的组件。
二，API
1，

import { BrowserRouter } from 'react-router-dom'

	<BrowserRouter
  	basename={optionalString}
  	forceRefresh={optionalBool}
  	getUserConfirmation={optionalFunc}
  	keyLength={optionalNumber}
	>
	  <App/>
	</BrowserRouter>

basename:String,当前位置的基础URL与服务器有关。
getUserConfirmation: func，当导航需要确认时执行的函数。
forceRefresh:bool 当导航设置为true时，导航过程中会刷新页面。
keyLength:number,location.key的长度。默认是6
这一部分用到的概率不大。
2，<HashRouter>
使用基本上与<BrowserRouter>一样，区别仅在于服务器响应和静态页面响应。
3，<Link>

<Link to="/courses" replace />

to:后面加需要跳转的路径或地址
replace:bool当设置为true时无论点多少次都只会有一个历史记录。可不加，不加为默认的
false
4，<NavLink>
如果想要给link加样式的话可以用这个。
<NavLink>这个会渲染成一个a标签。
activeClassName:string。这个用来给渲染成的a标签加class引入外部样式。
activeStyle:object。

<NavLink
  			to="/faq"
  			activeStyle={{
    			fontWeight: 'bold',
   			color: 'red'
   			}}
		     >FAQs</NavLink>

这样用于类似直接在添加行内样式，可以直接写在html中。
exact:bool,与router中的exact一样，只有地址完全匹配时上面两个才能用。
isActive: func，用于添加链接的额外功能，比如弹出弹框等。
5，<Prompt>
当用户离开当前页面时出现提示。

import { Prompt } from 'react-router'

	<Prompt
  	 when={formIsHalfFilledOut}
  	 message="Are you sure you want to leave?"
	/>

message:string.当离开时提示的信息。

message:fuc.离开时调用的函数。
eg：

when:bool,弹出这个弹框的条件。
6，< Redirect >
类似路由重定向，<Redirect to="/somewhere/else"/>，清除掉原来这个路径指向的地址改成to后面指向的地址。
to:目标地址。
push:bool, 默认为false,当为true时，把新地址加在访问记录里，也就是会有两个记录。
from:string,需要被重定向的地址。

7，<Route>
只要地址和路由匹配的话组件就会渲染。
react渲染的方法有三种，component,child,render。
component:路由会创建一个新的组件重新挂载。

<Route path="/user/:username" component={User}/>

	const User = ({ match }) => {
	  return <h1>Hello {match.params.username}!</h1>
	}

render:可以用于内联渲染和包装组件，总之如果有传递参数就可以选择用render

// 便捷的行内渲染
	<Route path="/home" render={() => <div>Home</div>}/>

	// 包装/合成
	const FadingRoute = ({ component: Component, ...rest }) => (
	  <Route {...rest} render={props => (
	    <FadeIn>
	      <Component {...props}/>
	    </FadeIn>
	  )}/>
	)
	
	<FadingRoute path="/cool" component={Something}/>

children:不管地址是否匹配都会渲染的内容。

<ul>
	  <ListItemLink to="/somewhere"/>
	  <ListItemLink to="/somewhere-else"/>
	</ul>

	const ListItemLink = ({ to, ...rest }) => (
	  <Route path={to} children={({ match }) => (
	    <li className={match ? 'active' : ''}>
	      <Link to={to} {...rest}/>
	    </li>
	  )}/>
	)

path:string,匹配的url
exact:bool,当为true时路径与页面地址必须完全一致。
strict:bool,强制路径结尾必须有“/”才能匹配。
PS：强制没有“/"::strict和exect都必须为true.

<Route exact strict path="/one" component={About}/>

sensititive:bool,为true时区分大小写。
8，history对象
history对象是可变的，因此可以从prop里来获取location而不是history.lqoaction。参照如下：

class Comp extends React.Component {
  	componentWillReceiveProps(nextProps) {
    	// locationChanged 变量为 true
    	const locationChanged = nextProps.location !== this.props.location

    	// 不正确，locationChanged 变量会 *永远* 为 false ，因为 history 是可变的（mutable）。
    	const locationChanged = nextProps.history.location !== this.props.history.location
  	}
     }
	<Route component={Comp}/>

9，location对象
当前位置，在react中用如下方式来获取location:
在 Route component 中，以 this.props.location 的方式获取，
在 Route render 中，以 ({ location }) => () 的方式获取，
在 Route children 中，以 ({ location }) => () 的方式获取，
在 withRouter 中，以 this.props.location 的方式获取。
/ 通常你只需要这样使用 location

// 但是你同样可以这么用
const location = {
  pathname: '/somewhere'
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

10，match对象
match对象包含了与URL匹配的信息。
参数有path,isExact,parpams,url等，可以用以下方法调用。
在 Route component 中，以 this.props.match 方式。
在 Route render 中，以 ({ match }) => () 方式。
在 Route children 中，以 ({ match }) => () 方式
在 withRouter 中，以 this.props.match 方式
matchPath 的返回值 当一个 Route 没有 path 时，它会匹配一切路径，你会匹配到最近的父级。在 withRouter 里也是一样的。