前端项目 react react-router v4 应该怎么配置

Question

问题

做一个后台管理系统, 使用create-react-app创建项目, 在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>规则管理</span>
            </span>
          }
        >
      <Menu.Item key="/rule/divide">佣金分成规则设置</Menu.Item>
    </SubMenu>
  </Menu>

Answer 1

NavMenu.js, props里面就没有history相关的属性 ， 是因为 NavMenu.js 不是路由组件
通过react-router 4 的 withRouter 来使非路由组件具有路由组件的属性
用法如下

import { withRouter } from 'react-router-dom'

@withRouter
class NavLinkBar extends React.Component {
}