React 动态添加路由

如何在React中动态添加路由组件

// 高阶组件，封装过的  router.js
import asyncComponent from "../utils/asyncComponent";  // 这个后面会有讲解import BasicLayout from "../layout/BasicLayout";
import NotFount from '../components/NotFount'const CallBack = asyncComponent(() => import('../pages/javascript/CallBack'))
const Closure = asyncComponent(() => import('../pages/javascript/Closure'))const router = [{path: '/',redirect: '/tool/content'},{path: '/tool',component: BasicLayout,routes: [{path: '/javascript',name: 'JS高级',component: NotFount,routes: [{path: '/fn',name: '函数借调',component: CallBack},{path: '/closure',name: '闭包',component: Closure}]}]}
]

处理路由文件，作为react中的每个组件

import { Route, Redirect } from 'react-router-dom'export function routeWithSub(router, fatherPath, list) {router.forEach(item => {// 拼接路由路径let path = fatherPath + item.pathitem.path && item.component && list.push(<Route exact key={ path } path={ path } render={ props => ( <item.component { ...props } routes={item.routes ? item.routes : []} content={list} /> ) } />)if (item.routes) {routeWithSub(item.routes, path, list)}})
}// 此处传入的就是 routejs 路由
export function withRoute(router) {let routerList = [] // 父组件路由let list = [] // 所有的子组件的路由router.forEach(item => {let path = item.path// 如果存在子路由交给递归继续处理if (item.routes) {routeWithSub(item.routes, path, list)// 父组件直接push routerList.push(<Route key={ path } path={ path } render={ props => (<item.component {...props} routes={ item.routes } content={ list } />)} /> )} else if (item.redirect) {routerList.push( <Redirect exact={ true } key={ item.path } from={ item.path } to={ item.redirect } /> )}})return routerList
}

直接在App.js 中引入这两个文件

import React from 'react'
import { HashRouter as Router, Switch } from 'react-router-dom'
import { withRoute } from './utils/route'import router from './router/index'export default class App extends React.Component {  render() {const routerList = withRoute(router)return (<Router><Switch>{ routerList }</Switch></Router>)}}

直接可以使用router.js 渲染路由菜单如图

最后附上关于一个高阶函数，引入加载nprogress

asyncComponent.js

import React from 'react'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'/*** 从加载时到加载结束用nprogress* @param {*} importComponent 传入的组件* @returns 高阶组件封装过的* */export default function asyncComponent(importComponent) {class AsyncComponent extends React.Component {constructor(props) {super(props)// 开始加载nprogress.start()this.state = {component: null}}async componentDidMount() {// Es6 解构赋值 先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。const { default: component } = await importComponent() // 加载完成nprogress.done()this.setState({component: component})}render() {const C = this.state.componentreturn C ? <C { ...this.props }></C> : null}}return AsyncComponent
}

如有问题，欢迎吐槽，共同学习，共同进步。

React 动态添加路由相关推荐

addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
vue 动态添加路由
为什么80%的码农都做不了架构师?>>> 最近在研究权限的相关东西,自然动态加载路由信息少不了.接下来我就来专门记录下我研究的东西. 1.首先后端代码返回一个对象,用java写 ...
Vue2.x动态添加路由实现
适用于:Vue2.x VueRouter3.x 动态添加路由一般应用于受权限控制的路由菜单,由后端返回可以判断该角色具有的权限,前端处理出一份符合权限的路由表,使用addRoutes方法动态添加权限路 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
addRoute动态添加路由导致浏览器警告
在动态添加路由的时候会在控制栏出现各种各样的路由警告,刚开始以为是路由name重名问题引起,后查询相关资料是动态路由添加引起的,在router/index.js文件下创建一个方法resetRouter ...
vue2.0 + router 3. 0 动态添加路由
3月11日周五作日回顾 .动态添加路由实现语句 vue 2.0使用 this.$router.addRoutes(); this.$router.addRoutes(currRoutes);// ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

React 动态添加路由

如何在React中动态添加路由组件

处理路由文件，作为react中的每个组件

直接在App.js 中引入这两个文件

最后附上关于一个高阶函数，引入加载nprogress

React 动态添加路由相关推荐

最新文章

热门文章