react结合react-router页面如何布局，不需要复杂代码，简单的说说布局就可以了

Question

比如Top.js Sidebar.js Main.js这些组件如何和react-router结合，大家有没有例子可以参考下。
我自己写了一个，但是感觉有问题，

<Router>
            <Switch>
                <Route exact path="/account/register" component={Register}/>
                <Route exact path="/account/login" component={Login}/>
                <Route exact path="/email/verify/:token" component={VerifyEmail}/>
                <Route path="/" render={()=>(
                    <Layout>
                        <Route exact path="/"
                               render={(props)=><Index {...props} column={this.state.mainColumn}/>}/>
                        <Route path="/explore" component={Explore}/>
                        <Route path="/user" component={User}/>
                        <Route path="/mysites" component={MySites}/>
                    </Layout>
                )}/>
            </Switch>
    </Router>

Answer 1

react-router4.0相当于把路由当成一个组件了，你组件怎么布局路由就可以怎么布
贴一个我现在的布局

        <Router>
           <Layout>
        {isProduction ? null : <DevTools/>}
        <Sider id="sider">
          <div className="fgw-logo">
            <Row gutter={16}>
              <Col span={8}>
                <Icon type="user" style={{fontSize: 40}} className="fgw-h-img" alt=""/>
              </Col>
              <Col span={8} className="fgw-logo-font">LOGO</Col>
            </Row>
          </div>
          <div className="fgw-clear"/>
          <Menu id="menu" className="fgw-leftbar-color" mode={this.state.mode}
                selectedKeys={[selectedKeys[1]]} defaultSelectedKeys={['roomMain']}>

            <Menu.Item key="/roomMain" className="fgw-menu">
              <Link to="/roomMain">
                <span className="verticalLevelCentered" style={{color: "#eeeeee"}}>机房管理</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="/cabinetList" className="fgw-menu">
              <Link to="/cabinetList">
                <span className="verticalLevelCentered" style={{color: "#eeeeee"}}>机柜管理</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="/hostMain" className="fgw-menu">
              <Link to="/hostMain">
                <span className="verticalLevelCentered" style={{color: "#eeeeee"}}>主机管理</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="/monitor/host" className="fgw-menu">
              <Link to="/monitor/host">
                <span className="verticalLevelCentered" style={{color: "#eeeeee"}}>监控管理</span>
              </Link>
            </Menu.Item>
            <SubMenu key="log" title={<span className="verticalLevelCentered" style={{color: "#eeeeee"}}>日志管理</span>}>
              <Menu.Item key="/log/operationRecord">
                <Link to="/log/operationRecord">
                  <span className="verticalLevelCentered" style={{color: "rgba(0, 0, 0, 0.65)",}}>操作记录</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="/log/alert">
                <Link to="/log/alert">
                  <span className="verticalLevelCentered" style={{color: "rgba(0, 0, 0, 0.65)"}}>告警记录</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="/log/search">
                <Link to="/log/search">
                  <span className="verticalLevelCentered" style={{color: "rgba(0, 0, 0, 0.65)"}}>日志查询</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="/log/kibanaView">
                <Link to="/log/kibanaView">
                  <span className="verticalLevelCentered" style={{color: "rgba(0, 0, 0, 0.65)"}}>日志图表</span>
                </Link>
              </Menu.Item>
            </SubMenu>
            <Menu.Item key="/test" className="fgw-menu">
              <Link to="/test">
                <span className="verticalLevelCentered" style={{color: "#eeeeee"}}>测试</span>
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <AppHeader/>
          <Content id="content">
            <Route exact path="/" render={() => (<Redirect to="/roomMain"/>)}/>
            {routes.map((route, index) => {
              if (route.protected === 'yes') {
                return (
                  <PrivateRoute key={index}
                                path={route.path}
                                component={route.component}
                                exact/>
                )
              } else {
                return (
                  <Route key={index}
                         path={route.path}
                         component={route.component}
                         exact/>
                )
              }
            })}
          </Content>
          {/*<Footer style={{textAlign: 'center'}}>*/}
          {/*Ant Design ©2016 Created by Ant UED*/}
          {/*</Footer>*/}
        </Layout>
      </Layout>
        </Router>