javascript - 如何在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} />

如果用户使用 about，我希望能够仅显示 AboutOne 和 AboutTwo 的链接, about/one ，或about/two (即页面及其子页面)。不幸的是<Link和 <NavLink你不能手动设置事件类(据我所知)，否则我只会做 visibility: visible它的风格。所以我想我有两个问题阻止我完成此任务:首先，我无法设置 Link 的时间。处于事件状态，其次，我不知道如何获取当前路由来确定用户是否在页面或其子页面上。有什么想法吗？

Answer 1

您可以将子菜单链接包装在 if 语句中，然后使用回调来检查您是否位于 about 路径上。您可以使用 this.props.location.pathname 检查 React Router 4 中的路径

不确定您正在使用什么 react 风格编码，但它可能会像这样

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