react中react-redux和react-router4.*的配合使用
发布在前端JavaScript开发2018年11月1日view:261ExpressftaletkfzeMeteor.jsSocketErickcepDuscawoeeznXmgvzgrkSPA,WebAppRalphKab数据结构和算法闭包&作用域Vue.jsredisbackbone自动化html5设计稿Charlesfat编译与执行百度BAEvuex
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在一个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')
);
//欢迎加入全栈开发交流群一起学习交流:864305860

了解更多 当搭配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的使用是互不影响的,一切正常使用就好。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
前端JavaScript开发

enter code here往前端这条不归路再次迈进

友情链接 大搜车前端团队博客
我的收藏