vue-cli-plugin-eplus/generator/template/react/src/router/index.js

vue-cli plugin to init eplus template

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import About from '@/views/about';
import Home from '@/views/home';

const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
    isAuth: false,
  },
  {
    path: '/about',
    component: About,
    isAuth: true,
  },
];

export class RouteWithSubRoutes extends Component {
  render() {
    const { ...route } = this.props;
    // 不需要鉴权或已鉴权完成
    if (!route.isAuth) {
      return <Route path={route.path} exact={!!route.exact} component={route.component} routes={route.children} />;
    }

    // 鉴权完成
    return (
      <Route
        path={route.path}
        render={props => {
          return <route.component {...props} routes={route.children} />;
        }}
      />
    );
  }
}
export default function RouterContainer() {
  return (
    <Router basename={process.env.BASE_URL}>
      <Switch>
        {routes.map((route, index) => (
          <Route
            key={index}
            exact={!!route.exact}
            path={route.path}
            render={() => (route.redirect ? <Redirect to={route.redirect} /> : <RouteWithSubRoutes {...route} />)}
          />
        ))}
      </Switch>
    </Router>
  );
}