Реакция: this.props.location.pathname не определен

Подскажите, как получить доступ к pathname? Параметр this.props пуст, а this.props.location не определен.

Как автоматически получить этот параметр, не задавая его самостоятельно?

Большинство найденных решений требуют, чтобы я сам (вручную) задавал этот параметр, что не очень удобно и усложняет код.

ReactDOM.render(
    <BrowserRouter>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </BrowserRouter>
  document.getElementById('root')
);

function App() {
  return (
    <Container>
      <Row><GeneralMenu /></Row>
      <Row>
        <Switch>
          <Route exact path="/block1">
            <PageStrategy />
          </Route>
          <Route exact path="/block2">
            <PageStrategy />
          </Route>
        </Switch>
      </Row>
    </Container>
  );
}

class GeneralMenu  extends Component {
    render() {
// {location} = this.props.location.pathname;
      return (
  <Navbar>
    <Nav activeKey = {this.props.location.pathname}>
      <Nav.Link href = "/block1">Block1</Nav.Link>
      <Nav.Link href = "/block2">Block2</Nav.Link>
    </Nav>
  </Navbar>
        );      
    }
}

person Zhihar    schedule 05.06.2020    source источник


Ответы (2)


Вы должны использовать withRouter() HOC в своем GeneralMenu следующим образом:

export default withRouter(GeneralMenu);

а затем используйте экспортированный элемент.

Вы также можете сделать что-то подобное, не экспортируя элемент:

const WithRouterGeneralMenu = withRouter(GeneralMenu);
person Emanuele Scarabattoli    schedule 05.06.2020

<Nav activeKey = {window.location.pathname}>

этот вариант работает!

А также

<Nav.Link as = {Link} to = "/block1">

вместо

<Nav.Link href = "/block1">

для скорости сайта

person Zhihar    schedule 05.06.2020