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

Question

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

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

Версия реагирующего маршрутизатора-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>
    );
  }

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