在一個(gè)react的項(xiàng)目中诗眨，目前來說項(xiàng)目過大，數(shù)據(jù)交互多的情況下選擇使用redux和router是很常見的孕讳。下面我就用代碼的展現(xiàn)形式匠楚，來舉例：
我們知道在react-redux的實(shí)踐中，最外層就是render函數(shù)的使用：
import React from 'react';
import {render} from 'react-dom';
import App from './App';
//這里使用render渲染
render(
<App/>,
document.getElementById('root')
);
當(dāng)我們使用redux的時(shí)候卫病，就會(huì)先創(chuàng)建一個(gè)store油啤，然后使用react-redux提供的Provider作為父組件包裹App：
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
當(dāng)搭配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
{/*結(jié)合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;
這時(shí)候后，在最外層：
import React from 'react';
import {render} from 'react-dom';
import App from './routerMap';
//這里使用render渲染
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
其實(shí)最后router和redux的使用是互不影響的帜平，一切正常使用就好幽告。
