跨多个组件管理导航状态(页)

Question

好了，请耐心听我说。我真的是个新手，所以如果之前有人问过这个问题，而我只是没有找到正确的地方，我道歉。

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

我要做的是在左侧窗格中为'/settings‘页面创建一个nav，仅当路径为/settings/*时才能看到

你会看到顶部的导航栏，然后单击我的个人资料菜单中的设置，并在左侧看到一个导航列表，其中显示了类似于“我的帐户”/设置/myaccount“我的个人资料”/设置/myprofile“服务条款”/设置/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的链接即可。