Как я могу получить правильный текущий путь в React, используя реакционный маршрутизатор 4.2.2 с роутером?

Question

Итак, у меня есть несколько файлов:

App.js

class App extends React.Component {

    render() {
        return (
            <div >
                <NavBar />
                <Main />
            </div>
        );
    }

}

export default App;

NavBar.js

class NavBar extends React.Component {

  render() {
    console.log(this.props.match)
    return (
      <div className="navbar-fixed">
        <nav className="light-blue lighten-1">
          <div className="nav-wrapper container">
            <a className="brand-logo">Logo</a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li><NavLink exact to="/characters" activeClassName="active">Characters</NavLink></li>
              <li><NavLink exact to="/locations" activeClassName="active">Locations</NavLink></li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default withRouter(NavBar);

Main.js

class Main extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/characters" component={Characters}/>
                <Route exact path="/locations" component={Locations}/>
            </Switch>
        );
    }
}

export default Main;

Маршрутизация работает, хотя в файле NavBar у меня есть строка console.log(this.props.match), и я всегда получаю один и тот же путь, а activeClassName даже неработа.

Всякий раз, когда я меняю местоположение, вывод всегда:

{
    path: "/", 
    url: "/", 
    params: {…}, 
    isExact: false
}

Единственное, что меняется, это ключ isExact.

Я могу получить доступ к путитеперь с this.props.location, хотя я должен сделать свой собственный логин для работы активных имен классов.

Я что-то здесь упускаю?Любая помощь будет высоко ценится.

Answer 1

Использование withRouter добавляет объект location к компоненту Свойства:

class NavBar extends React.Component {
  // just for reference
  static propTypes = {
    location: PropTypes.object
  }

  render() {
    console.log("Location", this.props.location);
    return (
      <div className="navbar-fixed">
        <nav className="light-blue lighten-1">
          <div className="nav-wrapper container">
            <a className="brand-logo">Logo</a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li><NavLink exact to="/characters" activeClassName="active">Characters</NavLink></li>
              <li><NavLink exact to="/locations" activeClassName="active">Locations</NavLink></li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default withRouter(NavBar);

props.location имеет форму:

{
  key: 'ac3df4',
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Answer 2

this.props.match дает вам параметры соответствия для ближайшего совпадающего родителя, а не для Маршрута в дочерних элементах, который совпадает, поскольку App находится на верхнем уровне и соответствует path='/', печать его в Navbar всегда будет возвращатьВы

{
    path: "/", 
    url: "/", 
    params: {…}, 
    isExact: false
}

Теперь, скажем, в вашем случае Characters компонент имеет subRoute (обратите внимание, что вы не должны использовать точное ключевое слово, если у вас есть вложенные маршруты внутри него), который вы определяете как

render() {
   return (
      <div>
          {/* other stuff*/}
          <Route path={`${this.props.match.path}/:characterId`} component={Character} />
      </div>
   )
}

В этом случае, хотя ваш URL может быть /characters/character-1, console.log(this.props.match) в символьном компоненте вернет вас

{
    path: "/character", 
    url: "/character", 
    params: {…}, 
    isExact: false
}

Что касается изменения значения isExact, оно возвращает васtrue of false на основании того факта, что весь URL-адрес соответствует вашему URL-адресу маршрута или нет