前端项目 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'@withRouterclass NavLinkBar extends React.Component {}