如何在react-router v4中使用当前路由获取渲染子菜单？

Question

My code looks similar to this : 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} />

I want to be able to only show the links to AboutOne and AboutTwo if the user is on about , about/one , or about/two (ie a page and its subpages). Unfortunately with <Link s and <NavLink s you can't manually set the active class (as far as I can tell), else I'd just do a visibility: visible style for it. So I guess I have two problems that are preventing me from accomplishing this: first, I can't set when the Link is active, and second, I don't know how to get the current route to determine if the user is on a page or its subpages. Any ideas?

Answer 1

You could wrap the submenu links in a if statement then use a callback to check if you are on the about path. You can check your path in React Router 4 using this.props.location.pathname

not sure what react style coding you are using but it could go like this

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

It appears I was looking at some janky react router docs that hadn't been updated. You can just the isActive prop. So, for future 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
  }