嵌套路由不起作用 - v2.3.0

Question

以下是我的路线：

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={LoginPage} />
    <Route path="login" component={LoginPage} />
    <Route path="logout" component={Logout} />
    <Route path="forgot-password" component={ForgotPasswordPage} />
    <Route path="dashboard" component={Dashboard} onEnter={this._requireAuth} />
    <Route path="users" component={UsersList} onEnter={this._requireAuth}>
      <Route path="add" component={UserAdd} onEnter={this._requireAuth} />
      <Route path="status" component={UserStatus} onEnter={this._requireAuth} />
    </Route>
  </Route>
</Router>

如果我尝试访问 / users 路由，例如<Link to="/users">Users</Link>，则效果很好。但是，当我尝试访问 / users / add 或 / users / status （例如<Link to="/users/add">Add User</Link>或<Link to="/users/status">User Status</Link>）时，没有任何反应。控制台中没有错误，只是页面是空白的。

Answer 1

我创建了一个空组件，重定向到 / users 。然后在该路由中创建一个索引路由，在 / users 中呈现一个列表组件。此外，在 / users 中创建了另一条路线，名为 / add 。当用户被重定向到用户/添加时，它会在空白用户组件中加载添加组件。

Routes.js

<Route path="users" component={UserManagement}>
   <IndexRoute component={UsersListPage} />
   <Route path="add" component={UserAddInfo} />
</Route>

UserManagement组件

<div className="user-management">
  {this.props.children}
</div>