react-router4.0 从零快速上手，4个关键概念

看了好多写react-router的文章，一上来都是和以前有什么不同，和3.0有什么不同，哪里更好了，哪里不好了。

搞得跟学术讨论一样，服了各位大神。

我就想知道怎么用。

教学大纲

Router
Route
执行函数来跳转
获取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)