react自动处理路由

为了避免一个一个route，提高开发效率
自动扫描views文件夹下的文件，我的要求的含list和index的扫下来

注意：若使用antd的Menu标签，此处path必须与Menu.item的key属性完全吻合

import React from 'react'
import { Switch } from 'react-router-dom'
import PrivateRouter from '../privateRouter/Index';
// 代替路由的录入
// 自动处理路由
const files = require.context('../../views', true, /\.js$/)
// 声明组件对象
const Components = [];
// 遍历需要转成导航栏的页面views
files.keys().map(item => {
    let url = item.slice(1).toLowerCase().split('.')[0]
    if (/list/.test(url) || url.includes('index')) {
        const component = files(item).default
        const path = `/admin${url}`;
        Components.push(
            {
                path,
                component
            }
        )
    }
})
class AutoMenu extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Switch>
                {Components.map((item) => {
                    return <PrivateRouter exact key={item.path} path={item.path} component={item.component} />
                })}
            </Switch>
        )
    }
}

export default AutoMenu

privateRouter封装

import React from 'react'
import { Route,Redirect } from 'react-router-dom'

//配置私有路由，阻拦未登录的用户
const privateRouter = ({ component: Component, ...rest }) => {
  let isLogin = localStorage.getItem('userId') 
  return (
    <Route
      {...rest}
      render={routeProps => (
        isLogin?
        <Component {...routeProps} />: <Redirect to="/" />
      )}
    />
  );
}


export default privateRouter