React Router 不会在子组件的 Route 上渲染新组件

Question

在App.js

 let routes = (
  <Switch>
    <Route path="/signin" component={SignIn} />
    <Redirect to="/signin" />
  </Switch>
)

// routes when user signed in
if (this.props.isAuthenticated) {
  routes = (
    <Switch>
      <Route path="/signout" component={SignOut} />
      <Route path="/" exact component={Dashboard} />
      <Redirect to="/" />
    </Switch>
  )
}
return (
  <div>
    {routes}
  </div>
);

这些组件和路由一切正常。但是在仪表盘上。我也想有不同的路线。在下面的代码中，角色始终 = admin to test

render() {
    let routes = null;
    switch (this.props.role) {
      case ('admin'):
        routes = (
          <Switch>
            <Route path='/uploads' component={UploadFileArea} />
          </Switch>
        );
        break;
      case ('student'):
        break;
      case ('lecturer'):
        break;
      default: routes = null;
    }
    return (
      <div>
        <NavigationBar username={this.props.username}/>
        <NavLink to='/uploads'>Uploads</NavLink>
        {routes}
      </div>
    );

我不明白为什么到 /uploads 的路由永远不起作用，它总是将我定向到仪表板“/”。将 <Route path='/uploads' component={UploadFileArea} /> 放入 App.js 仍然有效

Answer 1

这是因为您的 / 路径上有 exact 标志。如果您转到 /uploads，那么您的顶级路由将不会匹配任何内容，并将重定向回 /。如果您删除 exact 标志，它将起作用，除非您在 /signout 时它也会呈现。

最简单的解决方法是为您的斜杠路径指定一个唯一的名称，例如 /dashboard，然后将 / 重定向到 /dashboard。然后确保在您的仪表板组件中，您的上传路径的路径是 /dashboard/uploads.

React Router 不会在子组件的 Route 上渲染新组件

React Router does not render new component on Route of child component

reactjs

react-router

react-router-v4