时间戳

首页 > 解决方案 > React Display Route Container 没有页眉和页脚

javascript - React Display Route Container 没有页眉和页脚

问题描述

这是一个反应组件 - 在渲染方法内部，当路径为“/”时渲染 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>
    );
  }
}

标签： javascriptreactjscomponents

解决方案

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

推荐阅读