HOME
NAVIGATION

从零开始搭建一个webpack4.x+React+Redux+Sass的demo(3结束)


这个搭建的demo代码已经上传到这个仓库下的webpack-react文件夹中啦, 包括webpack4.x的配置、babel配置、Sass配置,搭了一个简单的react-router4.x, 配了一个简单的Redux(过两天学一下saga和thunk吧)

npm install 以后npm run dev就能跑啦

0.BrowserRouter

使用react-router4.x的BrowserRouter,链接可以跳转,但是手动刷新后,显示cannot get

解决方法:webpack.config.js中的devServer中设置

devServer: { ... historyApiFallback:true }

设置完以后,记得重新启动webpack dev server

原因这篇文章有些https://blog.csdn.net/zwkkkk1/article/details/83411071

但是这种解决方法有一个缺点,就是使用webpack打包时,因为browserHistory是依赖服务器的, 如果懒得使用nginx还想要在本地跑,改成hashHistory就好了。

1.exact

exact真的贼重要啊!它表示绝对匹配。如果不写的话,主页点击Link不跳转,都匹配到/(就是主页)去了

2.mapStateToProps

今天又研究了一下redux,遇到了一些坑,也弄明白了一些问题

mapStateToProps中return的东西为什么都要用this.props才可以取到?

因为,如果现在我写了一个傻瓜组件叫HOME,然后使用mapStateToProps并把它作为参数传入了connect。 此时,connect返回的函数就是一个容器组件(高阶组件),它包裹在傻瓜组件HOME的外面,这个容器组件会去context中取出store, 然后把store的数据通过props传递给Home组件所以傻瓜组件中,需要props才能取到具体数据