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>
);

所有这些组件和路由都可以正常工作。但是在仪表板上。我也想有不同的路线。在下面的这段代码中，角色永远=管理员进行测试

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上呈现新组件

1 个答案: