react中react-redux和react-router4.*的配合使用

在一个react的项目中，目前来说项目过大，数据交互多的情况下选择使用redux和router是很常见的。下面我就用代码的展现形式，来举例：

我们知道在react-redux的实践中，最外层就是render函数的使用：

import React from 'react';
import {render} from 'react-dom';
import App from './App';
//这里使用render渲染
render(
<App/>,
document.getElementById('root')
);

当我们使用redux的时候，就会先创建一个store，然后使用react-redux提供的Provider作为父组件包裹App：

render(
<Provider  store={store}>
<App/>
</Provider>,
document.getElementById('root')
);

当搭配router后，这里仍然不需要要改变的。我们只需要将router的配置，放入App里面的需要的组件里面：
routerMap.js:

import React,{Component} from 'react';
import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom';
import Home from '../containers/Home';
import User from '../containers/User';
import Search from '../containers/Search';
import Detail from '../containers/Detail';
import City from '../containers/City';
import NotFound from '../containers/404Page';
class App extends Component{
constructor(props, context){
super(props, context);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
}
render(){
return (
<Router>
<div>
{/**
* 这里可以公共的样式,比如 头部, 尾部, 等.
*/}
header
{/*结合Switch组件可以匹配到都匹配不到的路劲,404等...*/}
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/user'  component={User}/>
<Route path='/search'  component={Search}/>
<Route path='/detail'  component={Detail}/>
<Route path='/city'  component={City}/>
<Route component={NotFound}/>
</Switch>
footer
</div>
</Router>
);
}
}
export default App;

这时候后，在最外层：

import React from 'react';
import {render} from 'react-dom';
import App from './routerMap';
//这里使用render渲染
render(
<Provider  store={store}>
<App/>
</Provider>,
document.getElementById('root')
);

其实最后router和redux的使用是互不影响的，一切正常使用就好。

链接：http://www.jianshu.com/p/81c720481102