React Router 全部

路由庫：https://reacttraining.com/react-router/

gitbub： https://github.com/ReactTraining/react-router

介紹

react-router 在我學習的時候遇到一個坑，當時不知版本查別這個麼大，看着有些大牛的寫法，自己很蒙，在這記錄一下自己心得。

react Router安裝

react router react-router-dom react-router-native 的關係

React Router是核心路由功能，但是您可能不想直接安裝它。如果要編寫將在瀏覽器中運行的應用程序，則應該安裝react-router-dom。同樣，如果您正在編寫React Native應用程序，則應該安裝install react-router-native。這兩個都將react-router作爲依賴項安裝。

browserHistory，hashHistory

使用的是hashHistory, 遇到的問題就是鏈接地址會有 #

一般我使用browerHistory，可以看我另一篇文章瞭解更多二者區分用法

使用方法如下

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from '../views/index';
import Login from '../views/login';
class RouterHome extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/home/" component={Home} />
                    <Route path="/" component={Login} />
                </Switch>
            </Router>
        )
    }
}
export default RouterHome

Link

路由跳轉

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

pathname:路徑

search：參數

hash： 放入網址的hash     （可做頁面定位使用）

state：狀態持續到location(本人使用比較少，頁面刷新後state爲空);

當然也可以通過js來進行路由調轉利用history.push('路徑') 即可

Route

Route 組件也許是 React Router 中最重要的組件

最常用的的方法

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
</Router>

exact 默認true 路徑完全匹配的意思 

Switch

渲染與該地址匹配的第一個子節點 <Route> 或者 <Redirect>。

使用方法如下

<Switch>
  <Route exact path="/" component={Home}/>

  <Route path="/users" component={Users}/>
  <Redirect from="/accounts" to="/users"/>

  <Route component={NoMatch}/>
</Switch>