小结 react-router 4.x路由的使用

React Router 4.x

前言

以4.0版本为例， 我们在下载时， 要下载react-router-dom，注意不要下载 react-router
react-router-dom的变量更全，更符合我们的需要

路由分为两种模式

HashRouter

http://localhost:3000/#/home

BrowserRouter //不带‘#’号 并且需要和后台配合

http://localhost:3000/home

若无特殊要求，我们最常用的是HashRouter；

书写路由

import { HashRouter as router, Route, Switch, Redirect, NavLink } from 'react-router-dom'
import App from './App'
import login from './login'
//此处省略很多路由

Switch 的用法 （如switch case，匹配到一个结果就结束）

<NavLink to={"/ui"}>测试switch</NavLink>   

点击该标签，下边的两个路由都符合规则，因为先匹配到/ui/messages路由，则加载Messages组件
若无Switch标签，则匹配两个路由，两个组件都渲染至页面

<router>
   <Switch>
      <Route path="/ui/messages" component={Messages} />
      <Route path="/ui/tabs" component={Tabs} />
   <Switch>
<router>   

exact 的用法 （精准匹配）

还是刚刚这个例子，无switch标签，仍然点击"/ui"路由，因为"/ui/messages"为精准匹配，所以只有"/ui/tabs"路由被匹配到， 只有Tabs组件渲染至页面上

<router>
     <Route path="/ui/messages" exact component={Messages} />
     <Route path="/ui/tabs" component={Tabs} />
<router>   

Route render的用法 (用于嵌套路由)

<li to={"/common"}>测试嵌套路由</li>  点击此路由，common组件渲染至页面，common组件代码如下

import React from 'react'
export default class Common extends React.Component {
	render () {
		return (<div>
			这是Common组件
			<Link to="/common/order">子路由按钮</Link>
			{this.props.children}
		</div>)
	}	
}

<Link to="/common/order">子路由按钮</Link> 再次点击这个子路由按钮，则orderDetail组件 在common组件中也渲染出来

<router>
    <Route path="/common" render={() =>
        <Common>
            <Route path="/common/order" component={OrderDetail}/>
        </Common>  
    }
    />
</router>

未匹配到路由时

<li to={"/common"}>测试嵌套路由</li>  点击此路由

因匹配不到任何路由，则加载NoMatch组件

<router>
     <Route to="/home" component={home}/>
     <Route component={NoMatch} />
</router>