这是一个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>
    );
  }
}

最佳答案

如果要在<Route path="/" component={this.HomeContainer} />中添加精确值,则可以对其进行修复,也请阅读有关Switch的文档,它会找到与regexp匹配的第一条路线并将其呈现,因此您需要按顺序查找或为每条内部路线添加精确值。请记住,切换仅适用于直系子女,不适用于直系子女

关于javascript - 不带页眉和页脚的React Display Route Container,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59413384/

10-11 22:28
查看更多