react中react-redux和react-router4.*的配合使用
发布时间:2020-12-15 07:18:40 所属栏目:百科 来源:网络整理
导读:在一个react的项目中,目前来说项目过大,数据交互多的情况下选择使用 redux 和 router 是很常见的。下面我就用代码的展现形式,来举例: 我们知道在react-redux的实践中,最外层就是render函数的使用: import React from 'react';import {render} from 're
在一个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里面的需要的组件里面: 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的使用是互不影响的,一切正常使用就好。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |