简单粗暴的react路由

wenshi11019 发布于2019-08-23 15:31 / 1504人阅读

摘要：我要的是简单粗暴的路由习惯了路由的用法，再用总感觉挺麻烦的。那么就自己封装一个吧封装多级路由的情况文件名为定义路由列表对象文件名为一级路由二级路由在全局挂载在页面中使用有问题可以留言交流

我要的是简单粗暴的路由 习惯了 vue-router 路由的用法，再用react-router总感觉挺麻烦的。 那么就自己封装一个吧

1.封装多级路由的情况   ————文件名为routerView.js

import React from "react";
import {Switch, Redirect, Route} from "dva/router";
export default (props)=>{
  return {
    props.routes.map((item, index)=>{
      console.log(item.path);
      return {
        if (item.children){
          return 
        }else{
          return 
        }
      }}>
    })
  }
  }
}

2.定义路由列表对象  ————文件名为index.js

import React from "react";

// 一级路由
import Tab from "../routes/TabPage";
import Detail from "../routes/Detail";

// 二级路由
import Rank from "../routes/RankPage";
import Search from "../routes/SearchPage"
import Index from "../routes/IndexPage";

export default {
  routes: [{
    path: "/tab",
    component: Tab,
    children: [{
      path: "/tab/index",
      component: Index
    },
    {
      path: "/tab/rank",
      component: Rank
    },
    {
      path: "/tab/search",
      component: Search
    }]
  },
  {
    path: "/detail",
    component: Detail
  }]
}

3.在全局挂载

4.在页面中使用

有问题可以留言交流

云服务器 GPU云服务器简单路由-域名配置基于路由的webrtc php的路由配置支持linux的路由

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102188.html

react进阶系列 - 高阶组件详解四：高阶组件的嵌套使用

摘要：前面有讲到过很多页面会在初始时验证登录状态与用户角色。这个时候就涉及到一个高阶组件的嵌套使用。而每一个高阶组件函数执行之后中所返回的组件，刚好可以作为下一个高阶组件的参数继续执行，而并不会影响基础组件中所获得的新能力。前面有讲到过很多页面会在初始时验证登录状态与用户角色。我们可以使用高阶组件来封装这部分验证逻辑。封装好之后我们在使用的时候就可以如下： export default w...

LMou 2019-08-20 17:35 评论0 收藏0
简聊初步尝试服务端渲染的一些感想

摘要：多多少少有些不开心的事觉得精力没有被投入在重点上创业公司遇到问题变成盲人摸象也许正常吧不过最近这段时间因为服务端的策略调整我开始做一些服务端渲染主要的站点是简聊的登录页面整体从切换到了以及做了一些整体项目结构统一的工作或者说一些思考我估计这多多少少有些不开心的事, 觉得精力没有被投入在重点上创业公司遇到问题变成盲人摸象也许正常吧不过最近这段时间因为服务端的策略调整, 我开始做一些服务...

Clect 2019-08-19 17:13 评论0 收藏0
react 应用多入口配置 && 实践总结

摘要：如果不配置，则将所有的文件都注入。指明生成的路径，如果不配置就是。配置了新的，避免与第一个入口相互覆盖。甚至输入显然不存在的，也显示为的内容。这种现象，初步判断是服务器把所有请求重定向到了。至此，环境的多入口问题就解决了。前端根据自行配置。背景还是之前的那个项目，做完国际化没多久，还没来得及划水，又有新的活了 -- 移动端的兼容。考虑到后期的复杂度，需要做两套资源。具体的目...

Sike 2019-08-29 16:57 评论0 收藏0
react 应用多入口配置 && 实践总结

摘要：如果不配置，则将所有的文件都注入。指明生成的路径，如果不配置就是。配置了新的，避免与第一个入口相互覆盖。甚至输入显然不存在的，也显示为的内容。这种现象，初步判断是服务器把所有请求重定向到了。至此，环境的多入口问题就解决了。前端根据自行配置。背景还是之前的那个项目，做完国际化没多久，还没来得及划水，又有新的活了 -- 移动端的兼容。考虑到后期的复杂度，需要做两套资源。具体的目...

curried 2019-08-23 12:20 评论0 收藏0
react-redux 开发实践与学习分享

摘要：简介是一个状态管理的库，由基础上开发出来，与的主要区别是只有一个，关于，后文会详述。这个函数接受四个参数，它们分别是，，和。之前在注册页面，如果没有满足相关条件，则触发的行为。具体定义了项目中触发的行为类别，通过属性来区别于不同的行为。 redux简介 redux是一个js状态管理的库，由flux基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。在各...

imccl 2019-08-21 16:42 评论0 收藏0