在一个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的使用是互不影响的,一切正常使用就好。