Как получить подменю рендеринга с использованием текущего маршрута в response-router v4?

Question

Мой код выглядит примерно так: https://www.techiediaries.com/react-router-dom-v4/

  <div className="base">
    <header>
      <p>React Router v4 Browser Example</p>
        <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li><Link to='/about/one'>AboutOne</Link></li>
            <li><Link to='/about/two'>AboutTwo</Link></li>
          </ul>
        </nav>
    </header>
    <div className="container">
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />

Я хочу иметь возможность показывать ссылки на AboutOne и AboutTwo, только если пользователь включен about, about/one, или же about/two (т.е. страница и ее подстраницы). К сожалению с <Linkс и <NavLinkЕсли вы не можете вручную установить активный класс (насколько я могу судить), иначе я бы просто сделал visibility: visible стиль для этого. Итак, я думаю, у меня есть две проблемы, которые мешают мне выполнить это: во-первых, я не могу установить, когда Link активен, и, во-вторых, я не знаю, как получить текущий маршрут, чтобы определить, находится ли пользователь на странице или ее подстраницах. Есть идеи?

Answer 1

Вы можете заключить ссылки подменю в оператор if, а затем использовать обратный вызов, чтобы проверить, находитесь ли вы на пути about. Вы можете проверить свой путь в React Router 4, используя this.props.location.pathname

не уверен, что вы используете стиль кодирования реагирования, но это может пойти так

ifOnAboutPath() {
  return this.props.location.pathname === 'about' ? true : false;
}

render() {
const showSubmenu = <ul><li><Link to='/about/one'>AboutOne</Link></li>
        <li><Link to='/about/two'>AboutTwo</Link></li></ul>;
const subMenu = this.ifOnAboutPath.bind(this) ? showSubmenu : '';

<div className="base">
<header>
  <p>React Router v4 Browser Example</p>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/about'>About</Link></li>
        subMenu
      </ul>
    </nav>
</header>
<div className="container">
  <Route path="/" exact component={HomePage} />
  <Route path="/about" component={AboutPage} />

Answer 2

Похоже, я смотрел на некоторые документы о маршрутизаторах, которые не были обновлены. Вы можете просто isActive двигательный Итак, для будущих googlers/bingers/duckduckgoers:

  <NavLink
    to="/v/user"
    isActive={(match, location) => {
      console.log(match, location);
      return location.pathname.startsWith("/v/user");
    }}
    className="nav-sub-link"
    activeClassName="activeThing"
  >
    Submenu!
  </NavLink>

  .nav-sub-link:not(.activeThing) {
    visibility: hidden;
  }

  .nav-sub-link {
    visibility: visible;
    //then some more styles
  }