实战react技术栈+express前后端博客项目（2）-- 前端react-xxx、路由配置

React 前端之家
前端之家收集整理的这篇文章主要介绍了实战react技术栈+express前后端博客项目（2）-- 前端react-xxx、路由配置，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

项目地址：https://github.com/Nealyang/R...

本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的，
如果能做到集思广益，那岂不是更美。我们的口号是：坚决不会烂尾

本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！

react-redux 配置说明

reducer

首先我们在项目/app/reducers下新建一个index.js，用于导出所有的reducer。
也用于将admin、front等reducer汇总的文件。最后combineReducers后直接导出。

  1. export default combineReducers({
  2.     front,globalState: reducer,admin
  3. })

上面admin,reducer,front是别的文件中的reducer处理。这里我们可以暂时导出一个空的state。

对应的每一个子reducer书写大致如下：

  1. export const actionTypes = {
  2.     ADMIN_URI_LOCATION:"ADMIN_URI_LOCATION"
  3. };
  4.  
  5. const initialState = {
  6.     url:"/"
  7. };
  8.  
  9. export const actions = {
  10.     change_location_admin:function (url) {
  11.         return{
  12.             type:actionTypes.ADMIN_URI_LOCATION,data:url
  13.         }
  14.     }
  15. };
  16.  
  17. export function reducer(state=initialState,action) {
  18.     switch (action.type){
  19.         case actionTypes.ADMIN_URI_LOCATION:
  20.             return {
  21.                 ...state,url:action.data
  22.             };
  23.         default:
  24.             return state
  25.     }
  26. }
  27.  
  28. const admin = combineReducers({
  29.     adminGlobalState:reducer,users,tags
  30. });
  31.  
  32. export default admin

定义initialState（这个state节点上的initialState，不总的state），actions，actionTypes以及reducer。然后倒入reducer。
在index中引入后，即为state中的admin节点。

configureStore

配置store的文件。这个文件的功能正如其名，就是配置store的。其中我们主要做了如下工作。

  • applyMiddleware->将一些中间件、reducer、装在进去
  • 区分环境，判断是否需要加入开发工具。如：devToolsExtension
  • 配合热更新
  • createStore

代码如下：

  1. const win = window;
  2. const sagaMiddleware = createSagaMiddleware();
  3. const middlewares = [];
  4.  
  5. let storeEnhancers ;
  6. if(process.env.NODE_ENV==='production'){
  7.     storeEnhancers = compose(
  8.         applyMiddleware(...middlewares,sagaMiddleware)
  9.     );
  10. }else{
  11.     storeEnhancers = compose(
  12.         applyMiddleware(...middlewares,sagaMiddleware),(win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,);
  13. }
  14.  
  15. export default function configureStore(initialState={}) {
  16.     const store = createStore(rootReducer,initialState,storeEnhancers);
  17.     sagaMiddleware.run(rootSaga);
  18.     if (module.hot && process.env.NODE_ENV!=='production') {
  19.         // Enable Webpack hot module replacement for reducers
  20.         module.hot.accept( './reducers',() => {
  21.             const nextRootReducer = require('./reducers/index');
  22.             store.replaceReducer(nextRootReducer);
  23.         });
  24.     }
  25.     return store;
  26. }

最后倒入store，用于在App中使用。

react-router 配置说明

react-router中的配置主要在/container/index.js文件中。该文件负责导出所有路由中的文件。

说一下该项目的路由大致规则。默认情况下，输入域名（我们这里是localhost），直接进入首页。也就是我们项目中的front部分。

  1. / -> 首页 （虽然说首页，但是仔细看页面结构，其实就是文章列表页）
  2. /:tag -> 其他文章列表页
  3. /detail/:id -> 详情页
  4. /admin -> 后台管理首页
  5. /admin/xxx -> 后台管理页的某一个模块 比如：/admin/managerTags -> 标签管理页面
  6. /404 -> notFound

所以根据路由配置先具体后模糊的规则。并且这里牵涉到路由嵌套，所以必定抽离出组件来：

index.js render部分如下:

  1. render() {
  2.         let {isFetching} = this.props;
  3.         return (
  4.             <Router>
  5.                 <div>
  6.                     <Switch>
  7.                         <Route path='/404' component={NotFound}/>
  8.                         <Route path='/admin' component={Admin}/>
  9.                         <Route component={Front}/>
  10.                     </Switch>
  11.                     {isFetching && <Loading/>}
  12.                     {this.props.notification && this.props.notification.content ?
  13.                         (this.props.notification.type === 1 ?
  14.                             this.openNotification('success',this.props.notification.content) :
  15.                             this.openNotification('error',this.props.notification.content)) :
  16.                         null}
  17.                 </div>
  18.             </Router>
  19.         )
  20.     }

因为路由模糊的部分只要front部分是最模糊的，所以我们把它匹配到最下面。别的大家应该都没有疑惑，至于isFetch notification后面会介绍。
至于为什么要在这里放这些isFetch和notification。因为这是所有路由的最外面一层，是front和admin界面下公共的部分。Loading加载图标，全局提示信息都可以公用。
所以我们放在最外层。

一定记住。能公用的一组东西，我们一定是放到路由匹配的最外层。

下面看下Font和admin的代码

  1. const Front = ({match}) => {
  2.     return (
  3.         <div>
  4.             <div className={`${animationStyle.animated} ${animationStyle.fadeInDown}`}>
  5.                 <Banner/>
  6.                 <Menus/>
  7.             </div>
  8.             <Switch>
  9.                 <Route exact path={match.url} component={Home}/>
  10.                 <Route path={`/detail/:id`} component={Detail}/>
  11.                 <Route path={`/:tag`} component={Home}/>
  12.                 <Route component={NotFound}/>
  13.             </Switch>
  14.         </div>
  15.     )
  16. };

admin:

  1. render() {
  2.         const {url} = this.props.match;
  3.         if(this.props.userInfo.userType){
  4.             return (
  5.                 <div>
  6.                     {
  7.                         this.props.userInfo.userType === 'admin' ?
  8.                             <div className={style.container}>
  9.                                 <div className={style.menuContainer}>
  10.                                     <AdminMenu history={this.props.history}
  11.                                                url={this.props.adminUrl}
  12.                                                changeUrl={this.props.change_location_admin}/>
  13.                                 </div>
  14.                                 <div className={style.contentContainer}>
  15.                                     <Switch>
  16.                                         <Route exact path={url} component={AdminIndex}/>
  17.                                         <Route path={`${url}/managerUser`} component={AdminManagerUser}/>
  18.                                         <Route path={`${url}/managerTags`} component={AdminManagerTags}/>
  19.                                         <Route path={`${url}/newArticle`} component={AdminNewArticle}/>
  20.                                         <Route path={`${url}/detail`} component={Detail}/>
  21.                                         <Route component={NotFound}/>
  22.                                     </Switch>
  23.                                 </div>
  24.                             </div> :
  25.                             <Redirect to='/'/>
  26.                     }
  27.                 </div>
  28.             )
  29.         }else{
  30.             return <NotFound/>
  31.         }
  32.  
  33.     }

注意admin中的路由匹配，这里必须要使用{match},否则你点击link你会发现路由跳转成功了，但是对应页面没有渲染。

关于admin中为什么判断this.props.userInfo后续权限判断哪里会说到。以及会说这里遇到的一些问题（重点）。这里我们还是只关注路由部分。再次强调，必须使用match
来取url。然后根据自己后台管理的定义项，随着开发，往后面去填充对应的路由即可。

结束语

至此，这个项目的redux，router基本就配置完成了。后续随着开发，回往/app/reducers中在添加对应的reducer。以及在路由中添加新建的页面。

如果您有更好想法，欢迎您联系我。我们一起改进~

如果有什么不明白的地方，欢迎提issue。我会第一时间处理。

项目实现步骤系列博客

交流

倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~

扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习，一起进步

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

前端技术杂谈：604953717 (新建)

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作