Question

好，所以在这里忍受我。我真的很新来做出回应，因此，如果以前曾问过这个问题，而我只是在找错地方，我表示歉意。

我有一个正在构建的React应用，并且已经使用在线教程从头开始设置，该教程逐步介绍了如何在页面顶部创建导航栏（此功能很好），因为该导航列在该应用中.js文件在我的路由器切换之前。

我想做的是在“ / settings”页面的左窗格上创建一个导航，例如，仅在路径为/ settings / *时才会显示

您会在顶部看到导航栏，然后单击我的个人资料菜单中的设置，然后在左侧看到一个导航列表，其中显示类似 “我的帐户” / settings / myaccount “我的个人资料” / settings / myprofile “服务条款” / settings / tos 等等... 当您单击每个页面时，它将打开一个新组件/ settings / myaccount / settings / myprofile / settings / tos 等等...

我还想确保左侧导航栏已更新，并突出显示了正确的“项目”。我已经听说过有关“解除”状态的内容，但是不确定这是否是我需要做的事情，或者如何正确地解决这个问题。

我的想法是为/ settings创建某种类型的组件，然后在其中为myaccount，myprofile，tos等添加另一个路由开关，然后仅在此/ settings组件页面的顶部显示我的导航。这是一个可行的选项，并且在该特定组件中仅包含某种东西，状态为“ isSelected”，并设置一个类来突出显示有问题的导航项吗？

Routes.js文件的当前代码

export default ({ childProps }) =>
  <Switch>
    <AppliedRoute path="/" exact component={Home} props={childProps} />
    <AppliedRoute path="/login" exact component={Login} props={childProps} />
    <AppliedRoute path="/signup" exact component={Signup} props={childProps} />
    <AppliedRoute path="/settings" exact component={Settings} props={childProps} />

    { /* Finally, catch all unmatched routes */ }
    <Route component={NotFound} />
  </Switch>;

我想要浏览并转到其他页面的设置文件代码

<Container>
        <Row>
          <Col lg="lg-2">
            <Nav vertical pills>
              <NavItem>
                <NavLink href="/settings/gear">My Gear</NavLink>
              </NavItem>     
              <NavItem>
                <NavLink href="/settings/profile">My Gear</NavLink>
              </NavItem>                                                           
            </Nav>
          </Col>
          <Col xs = "lg-10">
            <div className="Settings">
              Settings Page!

              <LoaderButton
                  style={{backgroundColor: "#fc4c02"}}
                  size="lg"            
                  //disabled={!this.validateForm()}
                  type="submit"
                  //isLoading={this.state.isLoading}
                  text="Connect Strava"
                  loadingText="Logging in..."
                  icon={<FontAwesomeIcon icon={faStrava}/>}
                  onClick={this.handleSubmit}
                >            
                </LoaderButton>          
            </div>
          </Col>
        </Row>
      </Container>

在设置中我还没有设置状态部件或路由设置。因为我不想在每个页面中都重新做一次导航列表

Answer 1

有一个非常有用的库，称为React-Router。您可以在这里找到其文档： https://reacttraining.com/react-router/web/guides/quick-start

https://github.com/ReactTraining/react-router

如果要创建自己的导航，您已经在考虑正确的路线。

您想要一个父组件来保存导航状态。该父级将该状态信息向下传递到侧边栏组件，因此它知道您所在的页面。父组件还应实现用于更改状态的点击处理程序。单击处理程序功能应向下传递到导航，并绑定到导航项。

希望这对您有所帮助！

Answer 2

如果要避免使用Redux和容器，最简单的方法是将导航栏和显示作为同一组件的一部分，以便共享状态。根据状态设置（通过单击导航栏），可以有条件地呈现所需的3个子组件中的哪个。

下一步是将导航栏组件包装在处理状态的父组件中，选择要渲染的3个子组件中的哪一个或不渲染。如果您想知道导航栏子组件如何更改其父组件的状态，请查看here。

但是，出于您的方便起见，我建议您不要这样做。最好为每个选项创建一个单独的子路由。想象一下您网站的用户，如果要链接到“ TOS设置”页面，则必须向他们提供指向设置页面的链接，并告诉他们单击侧面导航栏上的“ TOS”按钮。您可以向他们提供指向mysite.com/settings/tos的链接。

跨多个组件（页面）管理导航状态

2 个答案: