Reactjs React路由器不会在子组件的路由上呈现新组件

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

let routes=(
)
//用户登录时的路由
如果（此.props.isAuthenticated）{
路线=(
)
}
返回(
{routes}
);

使用这些组件和路由，一切正常。但是在仪表板上。我也想有不同的路线。在下面的代码中，角色始终=要测试的管理员

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

render（）{
让routes=null；
切换（此.props.role）{
案例（'admin'）：
路线=(
);
打破
案例（“学生”）：
打破
案例（“讲师”）：
打破
默认值：routes=null；
}
返回(
上传
{routes}
);

---

我不明白为什么到/上传的路径永远不起作用，它总是指引我到“/”的仪表板。将

放在App.js中仍然有效

这是因为你的

//code>路径上有
精确的
标志。如果你转到
/uploads
，那么你的顶级路径将不匹配任何内容，并将重定向回到
/
。如果删除
确切的
标志，它将起作用，但当您在
/signout
中时，它也将呈现

最简单的解决方法是为斜杠路径指定一个唯一的名称，如
/dashboard
，并将
/
重定向到
/dashboard
。然后确保在仪表板组件内部，上传路径是
/dashboard/uploads
，我误解了确切的属性，因此它确实会导致此问题。我应该更谨慎一些小心。谢谢你指出。现在一切都很有魅力。