How to configure the front-end project react react-router v4

question

do a background management system, use create-react-app to create a project, how to configure the route, interface in index.js is the layout of the left and right columns, the left column is the navigation menu, and the navigation menu is written separately. Click on the right side of the menu to have the corresponding jump, divided into NavMenuComponent, MainComponent, I introduced these two components in App.js, how to write the route in order to meet the requirements.

This is what I wrote in

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: "-sharpfff", 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: "-sharpfff", minHeight: 360 }}>
      <Route render={props => <Main {...props} />} />
    </div>
  </Content>
  <Footer style={{ textAlign: "center" }}>
    Ant Design 2016 Created by Ant UED
  </Footer>
</Layout>

< / Layout >

if I introduce NavMenu.js, props directly, there is no attribute related to 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></span>
            </span>
          }
        >
      <Menu.Item key="/rule/divide"></Menu.Item>
    </SubMenu>
  </Menu>