React Display Route Container 没有页眉和页脚

Question

这是一个反应组件 - 在渲染方法内部，当路径为 '/' 时渲染 HomeContainer，当路径为 '/dashboard' 时渲染 DefaultContainer。我遇到的问题是确切的路径。当我在仪表板上时，我不想看到导航或页脚。当路径为“/dashboard”时，在 HomeContainer 中添加确切路径不会呈现 DefaultContainer。在实现这一点时遇到问题。有什么想法吗？

HomeContainer = () => {
    return (
      <div>
        <Navigation />
        <Route path="/" component={Home} />
        <Route path="/login" render={props => <LogIn {...props} />}/>
        <Route path="/register" component={Register} />;
        <Footer />
      </div>
    );
  };

  DefaultContainer = () => {
    return (
      <div className="app_container">
        <SideNav />
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/dashboard/recent" component={Recent} />
        <Route path="/dashboard/AddNote" component={AddNote} />
        <Route path="/dashboard/ToDo" component={ToDo} />
      </div>
    );
  };

  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route path="/" component={this.HomeContainer} />
            <AuthRoute path="/dashboard" authed={this.props.auth} component={this.DefaultContainer} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

Answer 1

如果您将精确添加到<Route path="/" component={this.HomeContainer} />，您可以修复它，也请阅读有关 Switch 的文档，它会找到匹配正则表达式的第一个路由并呈现它，因此您需要查看它的顺序或为每个内部添加精确路线。请记住，switch 仅适用于直接子代，不适用于子代的子代