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

【问题标题】：Manage Nav State across multiple components (pages)跨多个组件（页面）管理导航状态
【发布时间】：2019-10-08 03:16:35
【问题描述】：

好的，请耐心等待。我真的很陌生，所以如果以前有人问过这个问题，而我只是没有找对地方，我很抱歉。

我有一个我正在构建的 react 应用程序，我已经使用在线教程从头开始设置，该教程介绍了在页面顶部创建导航栏（这很好），因为它在应用程序中列出.js 文件在我的路由器切换之前。

我要做的是在左侧窗格中为“/settings”页面创建一个导航，例如，只有在路径为 /settings/* 时才能看到该页面

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

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

【问题讨论】：

如果您正在寻找到组件映射的路由，您应该阅读react-router 或其他类似的路由库。 Facebook recommends these
只是为了确保我得到以前的“答案”，这是我的想法。有一个名为 SettingsNav 的父组件，它维护正在查看的页面的状态，并且该组件将使用带有句柄的该信息更新 dom（我可以很容易地做到这一点）然后，在每个设置页面上，只需执行类似的操作，这是sudo 代码：返回 { 我的页面设置子页面信息.... }
或者可能设置 redux 或其他东西来更轻松地管理状态:)

标签： reactjs react-router

【解决方案1】：

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

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

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

您希望拥有一个保存导航状态的父组件。这个父级将该状态信息传递给您的侧边栏组件，因此它知道您在哪个页面上。父组件还应该实现用于更改状态的单击处理程序。点击处理函数应该传递给导航，并绑定到导航项。

希望对你有所帮助！

【讨论】：

我正在使用 React-Router :) 我讨厌对此的响应，因为它只会弄乱我的代码格式。给我一秒钟，我会更新问题。

【解决方案2】：

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

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

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

【讨论】：