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

看了好多写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就像Redux中的Provider

---

2.Route

Router和Route有什么区别？ 前者多了一个r

import { Route } from 'react-router-dom'
...
    
        <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'
...
    "/">Home
    "/about">About
    "/topics">Topics
...

如果使用函数来跳转怎么做呢

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

参数history是从那里传过来的，

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

用history的push方法，就可以去到对应的url

---

4.获取url参数

我们有这样一个路由映射的配置,
或者说，
有一个这样的：

<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)