reactjs - 主动NavLink到父元素

我正在使用React Router v4，并且在我的导航链接上，我想为active父元素而不是NavLink本身启用NavLink className。

即使我不在match元素中，也可以访问路径（Switch）吗？

还是我必须保持状态？因为我感觉它有点缺少路由器的想法。

这是我的示例，我想将active className应用于li元素而不是NavLink：

const {
  HashRouter,
  Switch,
  Route,
  Link,
  NavLink,
} = ReactRouterDOM

const About = () => (
    <article>
        My name is Moshe and I'm learning React and React Router v4.
    </article>
);

const Page = () => (
    <Switch>
      <Route exact path='/'  render={() => <h1>Welcome!</h1>} />
      <Route path='/about' component={About}/>
    </Switch>
);

const Nav = () => (
    <nav>
        <ul>
            <li><NavLink exact to="/">Home</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
        </ul>
    </nav>
);

class App extends React.Component {
    render() {
        return (
            <div>
                <Nav />
                <Page />
            </div>
        );
    }
}
ReactDOM.render((
    <HashRouter>
        <App />
    </HashRouter>),
    document.querySelector("#app"));

https://codepen.io/moshem/pen/ypzmQX

最佳答案

似乎并不容易实现。我使用了react router docs中所述的withRouter HOC。它允许从位于{ match, location, history }外部的组件内的props访问Routes。在示例中，我包装了Nav组件以获取location及其pathname。这是示例代码：

class Nav extends React.Component {
 getNavLinkClass = (path) => {
   return this.props.location.pathname === path ? 'active' : '';
 }
 render() {
  return (
    <nav>
      <ul>
        <li className={this.getNavLinkClass("/")}><NavLink exact to="/">Home</NavLink></li>
        <li className={this.getNavLinkClass("/about")}><NavLink to="/about">About</NavLink></li>
      </ul>
    </nav>
  )};
}
Nav = withRouter(Nav);

您可能必须在路径中照顾params（如果有），以正确匹配。但是您仍然必须为NavLink中的每个路径匹配，这可能不是很漂亮的代码。但想法是，更改路线时，将重新呈现Nav，并突出显示正确的li。

这是codesandbox上的工作示例。

关于reactjs - 主动NavLink到父元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48119414/

Navlink

reactjs - 主动NavLink到父元素