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

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react中react-redux和react-router4.*的配合使用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我们知道在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:

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

脚本宝典总结

以上是脚本宝典为你收集整理的react中react-redux和react-router4.*的配合使用全部内容,希望文章能够帮你解决react中react-redux和react-router4.*的配合使用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。