看了好多寫react-router的文章，一上來都是和以前有什麼不同，和3.0有什麼不同，哪裡更好了，哪裡不好了。

搞得跟學術討論一樣，服了各位大神。

我就想知道怎麼用。

教學大綱

1. Router
2. Route
3. 執行函式來跳轉
4. 獲取url引數

首先

npm install --save react-router-dom

這裡用的是 react-router-dom，直接用就好了

1.Router

使用react-route你要寫的第一句程式碼:

import { HashRouter as Router } from "react-router-dom"
 

// 這裡的Router其實是HashRouter，

const App = () => (
    <Router>
        <div> anything here </div>
    </Router>
)

把<Router/>放在應用最外層，把其他元件包裹起來,

Router也就用這麼一次，不會再出現了，
感覺上，Router就像Redux中的Provider

2.Route

Router和Route有什麼區別？ 前者多了一個r

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

...
    <Router>
        <div> anything here </div>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
    </Router>
...

每一個Route要傳入一個path和一個component
一個path(url) 對應 一個元件

比如 輸入 localhost:8000/#/about，
就會渲染About元件(mount)，
Home和Topics元件就會不見了(unmount)，

(出現了#是因為我們用的是HashRouter)

插一句

所以
簡單一點來解釋路由這個概念，就是
通過匹配url的值，來選擇渲染哪些元件，和不渲染哪些元件

3.執行函式來跳轉

基本的，你可以使用Link元件來跳轉，

import { Link } from 'react-router-dom'
...
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/topics">Topics</Link>
...

如果使用函式來跳轉怎麼做呢

// About元件
const About = ({ history }) => {
    function onClick(){
        history.push('/topics')
    }
    return <div onClick={onClick}>About</div>
}

引數history是從<Route>那裡傳過來的，

<Route path="/about" component={About}/>

用history的push方法，就可以去到對應的url

4.獲取url引數

我們有這樣一個路由對映的配置,
或者說，
有一個這樣的<Route/>：

<Route path="/topics/:topicId" component={Topic}/>

這裡的path稍微有點不同，多了個冒號，
如果在url中輸入localhost:8000/#/topics/abcdefg,
那麼這裡的:topicId就等於abcdefg

然後，Topic元件：

const Topic = ({ match, history }) => (
  <div>
    {match.params.topicId} // abcdefg
  </div>
)

match就跟history一樣，也是來自route的，
通過match的params屬性，就可以拿到url上的同名引數

5.路由改變，元件部分改變

有時我們不需要整個元件完全重新渲染，
比如這樣，

路由改變，高亮的選項也改變
這裡需要用到withRouter這個api

import { withRouter } from 'react-router-dom'
function Tabs({ history, location }){
    if(location.pathname=="/abc") {
        // do something...
    }
    return (<div>...</div>)
}
export default withRouter(Tabs)

經過withRouter處理的元件，會帶上location、history、match三個引數，
location會根據url的變化而變化，
元件只是部分重新渲染，而不是重新掛載(mount)