React+Router多级导航切换路由

背景

我们需要开发一个管理平台，登陆、注册及网站首页等不需要加载用户信息的页面放置在系统外部，系统内部则是需要验证用户身份及其角色的页面。

文件结构

注：输出文件树及文件 tree ./src /F

│  index.html 页面文件入口
│  index.js js文件入口
│  style.scss
├─actions
│      api.js
│      base.js
├─containers
│  │  contentMain.jsx 填充layout中的content部分
│  │  layout.jsx 系统页面中的布局，包含菜单导航
│  │  noPage.jsx  页面走丢
│  │  personal.jsx 
│  │  style.scss
│  ├─account
│  │      new.jsx
│  │      table.jsx
│  ├─clients
│  │      new.jsx
│  │      table.jsx
│  ├─firms
│  │      new.jsx
│  │      table.jsx
│  ├─index
│  │      index.jsx
│  │      items.jsx
│  │      style.scss
│  ├─login
│  │      index.jsx
│  │      style.scss
│  └─resetpassword
│          index.jsx
│          style.scss
└─ xxxxx···

最外层路由

import React from 'react';
import {
   render} from 'react-dom';
import {
   Provider} from 'react-redux';
import {
    HashRouter as Router, Route, Switch } from 'react-router-dom';

const IndexPage = require('./containers/index/index').default;
const Layout = require('./containers/layout').default;
const Login = require('./containers/login').default;
const RestPassWord = require('./containers/resetpassword').default;
const NotFoundPage = require('./containers/noPage').default;


import configureStore from './store';
import './style.scss'
const store = configureStore();

render(
    <Provider store={
   store}>
      <Router>
          <Switch>
            <Route path="/main" component={
   Layout} /> //模糊匹配，只要路由中有/main就会加载Layout组件
            <Route exact path="/index" component={
   IndexPage} /> // 精确匹配
            <Route exact path="/login" component={
   Login}