React router v4笔记_综合

使用npm来进行安装

npm install --save react-router react-router-dom

ReactRouter动态传值

设置, 以:开始的，然后紧跟着你传递的key(键名称)名称。
```
<Route path="/list/:id" component={List} />
```
Link上传递值
```
<li><Link to="/list/123">列表</Link> </li>
```
to属性的值可以是一个字符串，也可以是一个location(pathname, hash, state和search)对象。
组件上接收并显示传递值
```
componentDidMount(){console.log(this.props.match)
}
```
然后在浏览器的控制台中可以看到打印出的对象，对象包括三个部分:
- patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
- url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
- params：传递过来的参数，key和value值。

理解和使用Route

Route组件可以使用如下的属性：

path属性，字符串类型，它的值就是用来匹配url的。
component属性，它的值是一个组件。在path匹配成功之后会绘制这个组件。
exact属性，这个属性用来指明这个路由是不是排他的匹配。
strict属性，这个属性指明路径只匹配以斜线结尾的路径。

还有其他的一些属性，可以用来代替component属性。
render属性，一个返回React组件的方法。传说中的rencer-prop就是从这里来的。
children属性，返回一个React组件的方法。只不过这个总是会绘制，即使没有匹配的路径的时候

数的时候是用component属性就可以满足。但是，某些情况下你不得不使用render或children属性。

ReactRouter重定向-Redirect使用

标签式重定向

这个一般用在不是很复杂的业务逻辑中，比如我们进入Index组件，然后Index组件,直接重定向到Home组件。

//引入Redirect
import { Link , Redirect } from "react-router-dom";//引入Redirect后，直接在render函数里使用就可以了
<Redirect to="/home/" />

编程式重定向

//直接在构造函数constructor中加入下面的重定向代码
this.props.history.push("/home/");

进阶

React router的Route中component和render属性的使用

component ---只有当位置匹配时才会渲染的 React 组件

当您使用 component(而不是 render 或 children )Route 使用从给定组件 React.createElement 创建新的 React element。这意味着，如果您为 component 道具提供了内联功能，则每次渲染都会创建一个新组件。这会导致现有组件卸载和安装新组件，而不是仅更新现有组件。当使用内联函数进行内联渲染时，使用 render 或者 children(如下所示)
render: func ---这允许方便的内联渲染和包裹，而不是上面那种不想要的重新安装的解释

您可以传递一个在位置匹配时调用的函数，而不是使用属性为您创建新的 React element component，该 render 属性接收所有相同的 route props 的 component 渲染属性。

警告： Route component 优先于 Route render 因此不要在同一个 Route 使用两者。

通过一个小例子来说明：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from "react-router-dom";class Bar extends React.Component {componentDidMount() {console.log("componentDidMount")}render() {return (<div>Bar</div>)}
}class App extends React.Component {constructor(prop) {super(prop);this.state = {idx: 1}}handleClick = () => {this.setState(state => ({idx: state.idx + 1}))};render() {return (<div><div>{this.state.idx}<button onClick={this.handleClick}>add</button></div><div><BrowserRouter><Route component={Bar}/></BrowserRouter></div></div>);}
}ReactDOM.render(<App/>, document.getElementById('root'));//上面的代码中，App组件内有一个简单的Bar组件，通过component属性被Route引用。
//<Route component={Bar}/>
//此时在页面中点击按钮，Bar组件的componentDidMount并不会被触发。

假设现在需要在Bar组件中接受App中的idx，需要将idx作为props传递给Bar，此时可以写成如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from "react-router-dom";class Bar extends React.Component {componentDidMount() {console.log("componentDidMount")}render() {const {idx} = this.props;return (<div>in Bar : {idx}</div>)}
}class App extends React.Component {constructor(prop) {super(prop);this.state = {idx: 1}}handleClick = () => {this.setState(state => ({idx: state.idx + 1}))};render() {return (<div><div>{this.state.idx}<button onClick={this.handleClick}>add</button></div><div><BrowserRouter><Route component={() => (<Bar idx={this.state.idx}/>)}/></BrowserRouter></div></div>);}
}ReactDOM.render(<App/>, document.getElementById('root'));

然而此时点击按钮，发现Bar的componentDidMount一直被调用，所以正确的写法应该是:

<Route render={() => (<Bar idx={this.state.idx}/>)}/>
//此时Bar组件就不会出现重复的unmounting和mounting了。

其背后的原理在于，react在比较组件状态以便决定如何更新dom节点时，首先要比较组件的type和key。在使用<Route component={() => (<Bar idx={this.state.idx}/>)}/>时，由于调用了React.createElement，组件的type不是Bar这个类，而是一个匿名函数。App组件每次render时都生成一个新的匿名函数，导致生成的组件的type总是不相同，所以会产生重复的unmounting和mounting。

react路由懒加载(异步组件)------react-loadable

npm地址

安装
```
cnpm install react-loadable
```

封装loadable

首先，我们建一个util src/util/loadable.js

import React from 'react';
import Loadable from 'react-loadable';//通用的过场组件
const loadingComponent =()=>{return (<div>loading</div>) 
}//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{return Loadable({loader,loading});
}

调用
```
import loadable from '../util/loadable'const Home = loadable(()=>import('@pages/home'))
```
react-loadable是以组件级别来分割代码的，这意味着，我们不仅可以根据路由按需加载，还可以根据组件按需加载。

参考

React Router 印记中文

React Router 使用教程

利用react-router4的react-router-config做路由鉴权