react-router 4.0 路由嵌套问题,页面内点击显示对应组件。

Question

在网上搜了很多，各种试，实在写不出我想的那种效果，疯了，求解救。

如图：我想实现在对应的tab在左面区域显示对应的组件，v4的路由实在不知道怎么写，因为想实现和vue那种一个路由配置文件的效果，各种试，就是不行。

然后每次点击就会加载一个新的页面，我想在对应的内容区域加载对应的组件，怎么实现？

根文件 root.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';

import RouteMap from '../router/routeMap';

export default class Root extends React.Component {
    render() {
        return (
            <div>
                <RouteMap></RouteMap>
            </div>
        );
    };
}
ReactDOM.render(
    <Root/>, document.getElementById('app'));

路由文件: routemap.js

    
        import React from 'react';
        import {
            Router,
            Route,
            Link,
            Redirect,
            IndexRoute,
            BrowserRouter,
            Switch,
            browserHistory
        } from 'react-router-dom'
        
        
        import Login from '../js/pages/login';
        import Main from '../js/pages/main';
        import Err from '../js/pages/err';
        
        import Option1 from '../js/components/nav1/option1';
        import Option2 from '../js/components/nav1/option2';
        import Option3 from '../js/components/nav1/option3';
        
        // 适配移动端
        import MediaQuery from 'react-responsive';
        
        
        export default class RouteMap extends React.Component {
            updateHandle() {
                console.log('每次router变化之后都会触发')
            }
            render() {
                return (
                    <div>
                        <MediaQuery query='(min-device-width: 1224px)'>
                            <BrowserRouter  basename="/" history={browserHistory}>
                                <Switch>
                                    <Route exact path="/" component={Login}/>
                                    <Route exact path="/main" component={Main} />
                                        <Route exact path="/main/nav1/option1" component={Option1} />
                                        <Route exact path="/main/nav1/option2" component={Option2} />
                                        <Route exact path="/main/nav1/option3" component={Option3} />
                                    <Route exact path="*" component={Err}/>
                                </Switch>
                            </BrowserRouter>
                        </MediaQuery>
                        <MediaQuery query='(max-device-width: 1224px)'>
                            <div>移动端</div>
                        </MediaQuery>
                    </div>
                )
            }
        }
        

页面文件 main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Router,
  Route,
  Link,
  Redirect,
  IndexRoute,
  BrowserRouter,
  Switch,
  browserHistory
} from 'react-router-dom'

import {
  Layout,
  Menu,
  Breadcrumb,
  Icon
} from 'antd';
const {
  Header,
  Content,
  Footer,
  Sider
} = Layout;
const SubMenu = Menu.SubMenu;


export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false
    };
  }
  componentWillMount() {
    let Cid = this.props.params

  }
  componentWillUnmount() {

  }
  onCollapse(collapsed) {
    console.log(collapsed);
    this.setState({
      collapsed
    });
  }
  render() {
    const mainStyle = {
      logo: {
        "height": "32px",
        "background": "rgba(255,255,255,.2)",
        "margin": "16px"
      },
      title: {
        "fontSize": "28px",
        "color": "#e4393c",
        "textAlign": "center",
        "background": "#fff",
        "padding": "0"
      }
    }
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse.bind(this)}
        >
          <div style={mainStyle.logo} className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="13">
              <Icon type="pie-chart" />
              <span>111</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="desktop" /><span>nav1</span></span>}
            >
              <Menu.Item key="1"><Link to='main/nav1/option1'>Option1</Link></Menu.Item>
              <Menu.Item key="2"><Link to='main/nav1/option2'>Option2</Link></Menu.Item>
              <Menu.Item key="3"><Link to='main/nav1/option3'>Option3</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={<span><Icon type="desktop" /><span>nav2</span></span>}
            >
              <Menu.Item key="4">Option4</Menu.Item>
              <Menu.Item key="5">Option5</Menu.Item>
              <Menu.Item key="6">Option6</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub3"
              title={<span><Icon type="user" /><span>User</span></span>}
            >
              <Menu.Item key="7">Tom</Menu.Item>
              <Menu.Item key="8">Bill</Menu.Item>
              <Menu.Item key="9">Alex</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub4"
              title={<span><Icon type="team" /><span>Team</span></span>}
            >
              <Menu.Item key="10">Team 1</Menu.Item>
              <Menu.Item key="11">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="12">
              <Icon type="file" />
              <span>File</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={mainStyle.title}>
            
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div id="mainContent" style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children || "Welcome to your Main"}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }