React Router - NavLink activeStyle 或 activeClassName 不适用于嵌套路由答案

【问题标题】：React Router - NavLink activeStyle or activeClassName not working for nested routesReact Router - NavLink activeStyle 或 activeClassName 不适用于嵌套路由
【发布时间】：2018-08-30 10:43:57
【问题描述】：

我正在使用react-router-dom。在我的代码中，NavLink 无法应用 activeStyle 或 activeClassName 甚至在页面加载/重新加载时也没有。我已经嵌套了路由，但没有使用 redux。

示例代码： Stackblitz

react-router-dom 版本：4.3.1

index.js：

  render() {
    return (
      <div>
        <Router>
          <Hello>
            <Route path="/child-a" component={ChildA} />
            <Route path="/child-b" component={ChildB} />
          </Hello>
        </Router>
      </div>
    );
  }

hello.js：

  render() {
    return (
      <div>
        <h5>
          <NavLink
            to="child-a"
            activeStyle={{ color:'red' }}
            exact
          >child-a</NavLink>
        </h5>
        <h5>
          <NavLink
            to="child-b"
            activeStyle={{ color:'red' }}
            exact
          >child-b</NavLink>
        </h5>
        <div>
          <div><h2>Hello</h2></div>
          {this.props.children}
        </div>
      </div>
    );
  }

【问题讨论】：

React Router parent ".active" class not active when child router loaded的可能重复

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

尝试在to 属性前添加一个斜线。

将 hello.js 更改为：

render() {
    return (
      <div>
        <h5>
          <NavLink
            to="/child-a"
            activeStyle={{ color:'red' }}
            exact
          >child-a</NavLink>
        </h5>
        <h5>
          <NavLink
            to="/child-b"
            activeStyle={{ color:'red' }}
            exact
          >child-b</NavLink>
        </h5>
        <div>
          <div><h2>Hello</h2></div>
          {this.props.children}
        </div>
      </div>
    );
  }

似乎对我有用！

【讨论】：

@AbdulRafay 不仅仅是你。许多人都面临这样的问题：github.com/ReactTraining/react-router/issues/…
如果您有要导航到的子路径，这将没有意义，不是吗？假设我在 'example.com/orders' 页面上，我想导航到 'example.com/orders/accepted' 或 ''example.com/orders/rejected'，然后附加斜杠将表示“example.com/接受”。

【解决方案2】：

NavLink activeStyle 不适用于嵌套路由。由于您使用的是react-router-dom，因此您可以利用另一个属性history。

反应路由器Docs

历史对象通常具有以下属性和方法： location -（对象）当前位置。可能有以下属性： pathname - (string) URL 的路径

hello.js：

import { Link, withRouter } from "react-router-dom";

const activeTab = (history, path) => {
  if (history.location.pathname === path) {
    return { color: "red" };
  }
};

const Hello= ({ history }) => {
render() {
    return (
      <div>
        <h5>
          <Link
            to="/child-a"
            style={activeTab(history, "/child-a")}
            exact
          >child-a</Link>
        </h5>
        <h5>
          <Link
            to="/child-b"
            style={activeTab(history, "/child-b")}
            exact
          >child-b</Link>
        </h5>
        <div>
          <div><h2>Hello</h2></div>
          {this.props.children}
        </div>
      </div>
    );
  }
}
export default withRouter(Hello);

【讨论】：