前端項目 react react-router v4 應該怎么配置

問題

做一個后臺管理系統(tǒng), 使用create-react-app創(chuàng)建項目, 在index.js里面怎么配置route, 界面是左右欄布局, 左欄是導航菜單, 導航菜單自己單獨寫的組件, 點擊菜單右邊界面有相應的跳轉, 分為 NavMenuComponent, MainComponent, 我在App.js 引入這2個組件, 路由應該怎么寫, 才能達到要求.

index.js 里面我是這樣寫的

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <AppRoute />
  </BrowserRouter>,
  document.getElementById("root")
);

AppRoute.js

export default class AppRoute extends React.Component {
  render() {
    return (
      <Switch>
        <Route
          path="/"
          component={App}
        />
      </Switch>
    );
  }
}

App.js

<Layout style={{ minHeight: "100vh" }}>
<Sider
  collapsible
  collapsed={this.state.collapsed}
  onCollapse={this.onCollapse}
>
  <div className="logo" />
  <NavMenu />
</Sider>
<Layout>
  <Header style={{ background: "#fff", padding: 0 }} />
  <Content style={{ margin: "0 16px" }}>
    <Breadcrumb style={{ margin: "16px 0" }}>
      <Breadcrumb.Item>User</Breadcrumb.Item>
      <Breadcrumb.Item>Bill</Breadcrumb.Item>
    </Breadcrumb>
    <div style={{ padding: 24, background: "#fff", minHeight: 360 }}>
      <Route render={props => <Main {...props} />} />
    </div>
  </Content>
  <Footer style={{ textAlign: "center" }}>
    Ant Design ?2016 Created by Ant UED
  </Footer>
</Layout>

</Layout>

如果我直接引入NavMenu.js, props里面就沒有history相關的屬性
NavMenu.js

    <Menu
        theme="dark"
        defaultSelectedKeys={["/promoter/list"]}
        defaultOpenKeys={["/promoter"]}
        mode="inline"
        onSelect={this.handleMenuSelect}
          >
        <SubMenu
          key="/promoter"
          title={
            <span>
              <Icon type="user" />
              <span>推廣用戶管理</span>
            </span>
          }
        >
      <Menu.Item key="/promoter/list">代理用戶管理</Menu.Item>
    </SubMenu>
    <SubMenu
          key="/rule"
          title={
            <span>
              <Icon type="desktop" />
              <span>規(guī)則管理</span>
            </span>
          }
        >
      <Menu.Item key="/rule/divide">傭金分成規(guī)則設置</Menu.Item>
    </SubMenu>
  </Menu>