如何在react-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 s和<NavLink s，你無法手動設置活動類（據我所知），否則我只是做一個visibility: visible它的visibility: visible樣式。 所以我想我有兩個問題阻止我完成這個：首先，我無法設置Link何時處於活動狀態，其次，我不知道如何獲取當前路由以確定用戶是否在頁面或其子頁面。 有任何想法嗎？

Answer 1

您可以將子菜單鏈接包裝在if語句中，然后使用回調來檢查您是否在about路徑上。 您可以使用this.props.location.pathname檢查React Router 4中的路徑

不確定你正在使用什么樣的反應樣式編碼，但它可能會像這樣

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

看來我正在查看一些尚未更新的janky react路由器文檔。 你可以只是isActive道具。 因此，對於未來的googlers / bingers / duckduckers：

  <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
  }