reactjs – react-router-dom：从组件中获取props.location

发布时间：2020-12-15 20:16:01 所属栏目：百科来源：网络整理

导读：我有一个简单的应用程序,它使用来自’react-router-dom’v4的BrowserRouter.我正在尝试从 BrowserRouter /中访问location.pathname属性.组件,无济于事： class App extends Component{ render(){ return ( BrowserRouter // How do I access this.props.loca

我有一个简单的应用程序,它使用来自’react-router-dom’v4的BrowserRouter.我正在尝试从< BrowserRouter />中访问location.pathname属性.组件,无济于事：

class App extends Component{
  render(){
    return (
      <BrowserRouter>
        // How do I access this.props.location?
        <div className={(this.props.location.pathnme === "/account") ? "bgnd-black" : "bgnd-white"} >
          <Switch>
            <Route path="/login" component={LoginPage}/>
            <Route path="/success" component={LoginSuccess}/>
            <Route path="/account" component={MyAccount}/>
            ...
            <Route component={Error404}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

我知道我可以使用this.props.location.pathname通过子组件访问应用程序的当前路径位置,但我需要从父组件访问它,就在< BrowserRouter />下面.运行与子组件无关的其他逻辑.我怎样才能获得这个位置？

解决方法

您也可以使用withRouter来完成它,它具有类似的结果,将代码放在渲染参数中,并避免需要“假”< Route />.

基本上你把需要知道位置的JSX放在它自己的组件中,它由withRouter包装.这为组件提供了位置：

import { withRouter } from 'react-router-dom';

const Content = withRouter(props =>
    <div className={(props.location.pathname === "/account") ? "backg...
    ...
    </div>
);

然后在主路由器部分中使用它：

class App extends Component{
    render() {
        return (
            <BrowserRouter>
                <Content/>
                ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!