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

如果用户位于about，about/one或about/two（即页面及其子页面），我希望只能显示指向AboutOne和AboutTwo的链接。不幸的是，对于<Link和<NavLink s，您无法手动设置活动类（据我所知），否则我只需执行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反应路由器文档。你可以只是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
  }

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

2 个答案: