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>