Управление состоянием Nav для нескольких компонентов (страниц)

Question

Хорошо, так терпите меня здесь. Я действительно новичок, чтобы реагировать, поэтому, если этот вопрос задавался ранее, и я просто не смотрю в нужных местах, я прошу прощения.

У меня есть приложение реагирования, которое я создаю, и я настроил его с нуля, используя интерактивное учебное пособие, в котором рассказывается о создании навигационной панели в верхней части страницы (это прекрасно работает), как это указано в приложении. Файл .js до моего переключения маршрутизатора.

Я пытаюсь создать навигацию на левой панели для страницы «/ настройки», которая будет отображаться только в том случае, если путь - / настройки / *, например

Вы увидите панель навигации вверху, затем нажмите на настройки в меню моего профиля и увидите список навигации слева, который показывает такие вещи, как «Моя учетная запись» / настройки / myaccount «Мой профиль» / настройки / myprofile «Условия предоставления услуг» / настройки / tos так далее... При нажатии на каждую из этих страниц откроется новый компонент / settings / myaccount / Настройки / MyProfile / Настройки / тос и т.д ...

Я также хочу убедиться, что моя навигация обновлена ​​с левой стороны и показывает правильный «пункт», выделенный. Я слышал кое-что о состоянии «снятия» с этого, но не уверен, что это то, что мне нужно делать, или как правильно это делать.

Я думал о том, чтобы создать какой-то тип компонента для / settings, а затем включить другой переключатель маршрута для myaccount, myprofile, tos и т. Д. И просто отобразить навигацию в верхней части страницы этого компонента / settings. Это приемлемый вариант, и в этом конкретном компоненте просто есть что-то, что содержит состояние «isSelected» и устанавливает класс для выделения рассматриваемого элемента nav?

Текущий код для моего файла 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

Если вы хотите избежать использования избыточности и контейнеров, самый простой способ - использовать панель навигации и отображение как части одного и того же компонента, чтобы обеспечить совместное использование состояния. В зависимости от того, какое состояние установлено (нажав на панель навигации), вы можете условно отобразить, какой из 3 подкомпонентов вы хотите.

Следующим шагом является обертывание компонента navbar в родительский компонент, который обрабатывает состояние и выбирает, какой из 3 подкомпонентов или ни один из них не визуализировать. Если вам интересно, как дочерний компонент navbar может изменить состояние своего родителя, посмотрите здесь .

Однако в вашем случае я бы рекомендовал против этого для удобства использования. Лучше сделать отдельный подпункт для каждого варианта. Представьте для пользователя вашего сайта, что если вы хотите перейти по ссылке на страницу настроек TOS, вам нужно будет предоставить им ссылку на страницу настроек и сказать им, чтобы они нажимали кнопку TOS на навигационной панели сбоку. Вы можете просто предоставить им ссылку на mysite.com/settings/tos.