react 路由配置

这是一套路由配置使用的方案展示，若有不详细明确的地方/或者缺陷可以留言提醒
这里用到了mobx，可以不用理会无关代码

1.module
里面是根据项目板块划分的路由承载文件，提取一个文件作为示例
curriculum.js

import {loading} from "../config.js"; //自定义加载过程
import Loadable from 'react-loadable';//懒加载

//课程管理
export default [{
    path: '/main/curriculum',
    exact: false,
    label: "课程管理",
    name: 'curriculum', 
    component: Loadable({
        loader: () => import("../../page/curriculum/index.jsx"),
        loading
    }),
    meta: {
        show:true
    },children: [
        {
            path: '/main/curriculum/list',
            exact: true, //默认显示子路由
            label: "课程列表",
            name: 'curriculumList',
            component: Loadable({
                loader: () => import("../../page/curriculum/list/index.jsx"),
                loading
            }),
            meta: {
                icon: "iconkechengliebiao",//用于菜单栏展示的icon
                show:true //是否需要显示到菜单导航
            },
            //自定义当前组件的按钮权限,配合使用,关于组件权限后面会有
             btn: [{
                            label: '绑定站点',
                            value: "bind"
                        },
                        {
                            label: '编辑',
                            value: "update"
                        },
                        {
                            label: '新增管理员',
                            value: "addAdmin"
                        },
                    ]
        },]
        }]

2.config.js//懒加载的加载组件

import React from "react";
import {
	LoadingOutlined
} from "@ant-design/icons";


export  const loading = () => {
    return (
        <div className="pageLoading">
            <LoadingOutlined></LoadingOutlined>加载中...
        </div>
    );
}

3.index.js

import Loadable from 'react-loadable';
import {
    loading
} from "./config.js";
import curriculum from "./module/curriculum.js";
import merchandise from "./module/merchandise.js";
import public_class from "./module/public_class.js";
import user from "./module/user.js";
import website from "./module/website.js";
import other from "./module/other.js";
import home from "./module/home.js";

//子页面集合
const mainChilrend = [ ...home,...curriculum, ...merchandise, ...public_class, ...user, ...website, ...other]
export default [{
        path: '/',
        exact: true,
        name: 'login',
        component: Loadable({
            loader: () => import('../page/login/login.jsx'),
            loading
        }),
        meta: {
            login: false
        }
    },
    {
        path: '/main',
        exact: false,
        name: 'main',
        component: Loadable({
            loader: () => import("../page/main/main.jsx"),
            loading
        }),
        meta: {
            login: false
        },
        children: [
            ...mainChilrend
            
        ]
    }
]

这样主要的路由配置做好了，下面是使用这些配置
App.js 渲染组件，这里是不包含权限

import React from 'react';
import  'antd/dist/antd.css';
import { HashRouter  as Router, Route ,Switch } from "react-router-dom";
import routeMain from "./router/index";
// 在需要用到的 组件文件中引入中文语言包
import zhCN from 'antd/es/locale/zh_CN.js'; 
import {ConfigProvider} from "antd";

const AppContext = React.createContext({});
class App extends React.Component{

    //路由
    renderComponent(){
       return routeMain.map((item,index)=>{
            return (
                <Route key={index} path={item.path} exact={item.exact} 
                render={
                    props=>{
                        return <item.component {...props} route={item} />
                    }
                }>
                </Route>
            );
        })
    }
     
    render(){
        return(
            <AppContext.Provider value={{
                active:'0'
            }}>
            <div>
                <Router>
                <Switch>
                    <ConfigProvider locale={zhCN}>
                    {this.renderComponent()}
                    </ConfigProvider>
                   
                </Switch>
                </Router>
            </div>
            </AppContext.Provider>
        )
    }
    
}
export default App;

权限举例图中的index.jsx

import React from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import mainChilrend from "../../router/module/curriculum.js";
import { observer, inject } from "mobx-react";
import NonePower from "../../component/none_power/index.jsx";//无权限提示组件
const routeList = mainChilrend[0].children;

@inject("commStore")
@observer
class App extends React.Component {
	// 路由拦截
	interceptRouter(item, props) {
		let menuList = this.props.commStore.menuList;//这里是之前在后端获取到的菜单列表，表示当前账号有权访问的菜单
		// 剔除在权限中的菜单-实现权限控制-路由跳转时发现没权限就会自动渲染无权提示页面NonePower
		if (menuList[item.name]) {
			return <item.component {...props} route={item} />;
		} else {
			return <NonePower></NonePower>;
		}
	}
	//路由
	renderComponent() {
		return routeList.map((item, index) => {
			return (
				<Route
					key={index}
					path={item.path}
					exact={item.exact}
					render={(props) => {
						return this.interceptRouter(item, props);
					}}
				></Route>
			);
		});
	}

	render() {
		return (
			<Router>
				<Switch>{this.renderComponent()}</Switch>
			</Router>
		);
	}
}
export default App;