React Router - NavLink activeStyle или activeClassName не работает для вложенных маршрутов

Question

Я использую react-router-dom, В моем коде NavLink не применяется activeStyle или же activeClassName даже на странице загрузки / перезагрузки. Я вложил маршруты, но не использовал избыточность.

Пример кода: Stackblitz

Версия response-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>
    );
  }

Answer 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>
    );
  }

Кажется, работает на меня!

Answer 2

NavLink activeStyleне работает для вложенных маршрутов. Поскольку вы используете react-router-dom, есть еще одно свойство history которым вы пользуетесь.

React RouterДокументация по

Объекты истории обычно имеют следующие свойства и методы: местоположение - (объект) текущее местоположение. Может иметь следующие свойства: pathname - (строка) Путь к 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);