反应：this.props.location.pathname 未定义

Question

告诉我如何访问 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>
        );      
    }
}

Answer 1

您应该以这种方式在 GeneralMenu 中使用 withRouter() HOC：

export default withRouter(GeneralMenu);

然后使用导出的元素。

你也可以这样做，不导出元素：

const WithRouterGeneralMenu = withRouter(GeneralMenu);

Answer 2

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

这个选项有效！

和

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

改为

<Nav.Link href = "/block1">

网站速度

反应：this.props.location.pathname 未定义

React: this.props.location.pathname is undefined

location

pathname

reactjs

bootstrap-4

react-router-dom