React+Router多级导航切换路由方式

│  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} />
            <Route exact path="/reset" component={RestPassWord} />
            <Route component={NotFoundPage} />
          </Switch>
        </Router>
    </Provider>, document.getElementById('root')
  );

# Layout
import React, { Component } from 'react';
import { Layout, Menu, Avatar, Icon , Dropdown} from 'antd';
import {Link} from 'react-router-dom';
import ContentMain from './contentMain';
import { createHashHistory } from 'history';
import './style.scss';
const history = createHashHistory();
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export default class LayoutPagae extends Component {
  state = {
    collapsed: false,
    user: 'Liz',
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  handleLoginOut = e => {
    e.preventDefault();
    history.push('/login');
  };
  render() {
    const menu = (
      <Menu>
        <Menu.Item>
          <Link to={'/main/personal'}>个人中心</Link>
        </Menu.Item>
        <Menu.Item>
          <div onClick={this.handleLoginOut}>退出</div>
        </Menu.Item>
      </Menu>
    );
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo"> CRM </div>
          <Menu theme="dark" defaultSelectedKeys={['person']} defaultOpenKeys={['table']}  mode="inline">
            <SubMenu
              key="person"
              title={
                <span>
                  <Icon type="user" />
                  <span>个人客户</span>
                </span>
              }
            >
              <Menu.Item key="table"><Link to={'/main/client/table'}>个人客户表</Link></Menu.Item>
              <Menu.Item key="new"><Link to={'/main/client/new'}>添加个人客户</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="firms"
              title={
                <span>
                  <Icon type="team" />
                  <span>企业客户</span>
                </span>
              }
            >
              <Menu.Item key="table"><Link to={'/main/firms/table'}>企业客户表</Link></Menu.Item>
              <Menu.Item key="new"><Link to={'/main/firms/new'}>添加企业客户</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="account"
              title={
                <span>
                  <Icon type="area-chart" />
                  <span>绩效汇总</span>
                </span>
              }
            >
              <Menu.Item key="table"><Link to={'/main/account/table'}>绩效汇总表</Link></Menu.Item>
              <Menu.Item key="new"><Link to={'/main/account/new'}>添加新成交</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Header>
            <Dropdown overlay={menu}>
              <Avatar style={{ backgroundColor: '#f56a00', verticalAlign: 'middle' }} size="large">
                {this.state.user}
              </Avatar>
            </Dropdown>
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <ContentMain />
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

import React from 'react';
import {HashRouter as Router,Route, Switch} from 'react-router-dom';
import ClientsTable from './clients/table';
import ClientsNew from './clients/new';
import FirmsTable from './firms/table';
import FirmsNew from './firms/new';
import AccountTable from './account/table';
import AccountNew from './account/new';
import Personal from './personal';
class ContentMain extends React.Component {
	render() {
		return (
			<div>
				<Router>
					<Switch>
						<Route exact path='/main/client/table' component={ClientsTable}/> //全部都精确匹配
						<Route exact path='/main/client/new' component={ClientsNew}/>
						<Route exact path='/main/firms/table' component={FirmsTable}/>
						<Route exact path='/main/firms/new' component={FirmsNew}/>
						<Route exact path='/main/account/table' component={AccountTable}/>
						<Route exact path='/main/account/new' component={AccountNew}/>
						<Route exact path='/main/personal' component={Personal}/>
					</Switch>
				</Router>
			</div>
		)
	}
}

export default ContentMain