Question

我需要访问父组件中的活动路径，以便我可以根据位置改变一些CSS。这是App - 父母：

class App extends React.Component {

  render(){
    return (
      <div className="wrapper" >
        <div className="content">
          <Router>
          <div className="container_b">
            <Menu />
            <div>
              <Route exact path="/" component={Home}/>
              <Route path="/confidence" component={ConfidenceInterval}/>
              <Route path="/proind" component={ProportionTestInd}/>
              <Route path="/prodep" component={ProportionTestDep}/>
            </div>
          </div>
          </Router>
          <div className="push"></div>
        </div>
        <footer className="footer"><Footer /></footer>
      </div>
    )
  }

}

Answer 1

我认为对于App组件，您有两种选择。第一个是使用withRouter更高阶组件包装App。 React-router提供了一个名为withRouter的高阶组件，它将匹配，历史和位置道具传递给它所包含的组件。（详情请查看withRouter）

在这种情况下，您可以进行以下操作

class App extends React.Component {

  render(){
    const {location: {pathname}} = this.props // pathname gives you the current path
    return (
      <div className="wrapper" >
        <div className="content">
          <Router>
          <div className="container_b">
            <Menu />
            <div>
              <Route exact path="/" component={Home}/>
              <Route path="/confidence" component={ConfidenceInterval}/>
              <Route path="/proind" component={ProportionTestInd}/>
              <Route path="/prodep" component={ProportionTestDep}/>
            </div>
          </div>
          </Router>
          <div className="push"></div>
        </div>
        <footer className="footer"><Footer /></footer>
      </div>
    )
  }

}

export const WrappedApp = withRouter(App)

第二个选项是，（同样适用于App组件）您可以使用window.location（请检查window.location）。在这种情况下，location.pathname还应该为您提供当前路径。

对于Home，ConfidenceInterval等其他组件，Route默认会传递匹配，历史和位置道具，以便您可以使用它们。

React Router：获取容器组件中的位置

1 个答案: