如何在React的App组件中访问React Router的location属性？

如何在React的App组件中访问React Router的props #

当然有办法啦！在React Router中，只有被<Route>直接渲染的组件才会自动接收路由相关的props（比如location、match、history），但如果你的App组件是作为<BrowserRouter>的直接子组件，默认是拿不到这些props的。下面给你几种常用的解决方案：

方法1：使用withRouter高阶组件（类组件适用） #

从你提到this.props.location来看，你的App应该是类组件。这种情况下，可以用React Router提供的withRouter高阶组件包裹App，把路由props注入到组件中。

具体实现：

1. 在App.js中导入withRouter：

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

2. 导出组件时用withRouter包裹：

class App extends React.Component {
  render() {
    // 现在可以正常访问this.props.location了
    const { location } = this.props;
    return (
      <div className="app-container">
        <HeaderContainer location={location} />
        {/* 你的其他组件内容 */}
      </div>
    );
  }
}

export default withRouter(App);

方法2：使用useLocation钩子（函数组件适用） #

如果你的App是函数组件，可以用React Router的useLocation钩子直接获取location对象，写法更简洁：

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

function App() {
  const location = useLocation();
  return (
    <div className="app-container">
      <HeaderContainer location={location} />
      {/* 你的其他组件内容 */}
    </div>
  );
}

export default App;

关键注意事项 #

一定要确保你的index.js中，App组件是被<BrowserRouter>包裹的，否则上述方法都不会生效：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

这样处理后，App组件就能拿到location属性，顺利传递给HeaderContainer啦！

内容的提问来源于stack exchange，提问作者Nick Dichiaro