没有页眉和页脚的反应显示路由容器

Question

这是一个react组件-在render方法内部，当路径为'/'时，渲染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的文档，它会找到与regexp匹配的第一条路线并进行渲染，因此您需要按顺序查看，或为每个内部路线添加精确