前端项目 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.jsexport 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 {

}