Как передать информацию о местоположении React Router компоненту?

Question

Я пытаюсь выяснить, как передать указатель местоположения React Router компоненту.

У меня есть маршрут, определенный так:

<Route
  path="placeholder"
  render={(props) => <Navigation {...props} />}
/>

В моем компоненте навигации я делаю console.log(this.props); в методе рендеринга только для получения пустого объекта. Что дает? Разве местоположение объекта не должно автоматически предоставляться любому компоненту внутри маршрута?

Кстати, я использую версию response-router-dom 4.2.2.

Answer 1

Вам необходимо использовать функцию withRouter из 'react-router-dom' на главном компоненте, где вы настраиваете маршруты, завернутые в коммутатор, и у вас должен быть доступ к реквизиту местоположения в компоненте навигации с помощью this.props.location

App.js


Class App extends Component {
  render(){
    return (
        <Aux>
            <Switch>
                <Route path="/login" exact component={Login}/>
                <Route path="/Navigation" component={Navigation}/>
                <Redirect to="/login"/>
            </Switch>
        </Aux>
    );
  }
}
export default withRouter(App);

Answer 2

Вам необходимо деформировать свой компонент с помощью withRouter, чтобы добавить match, history и location в реквизиты компонента.

import { withRouter } from 'react-router-dom';
class Navigation extends React.Component {

  render() {
    const { match, location, history } = this.props
    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Navigation)