如何让未被<Route />包裹的Header组件获取this.props.location？

嘿，这个场景太常见了！我之前做项目的时候也纠结过——不想把Header硬塞进每个<Route />里，又要拿到当前的路由信息，React Router其实提供了几个完美的解决方案，分情况给你说说：

1. 类组件：用withRouter高阶组件（React Router 5及以下） #

这是类组件最直接的办法，withRouter可以把路由相关的location、history、match这些props注入到任何组件中，不管它有没有被<Route />包裹。

步骤很简单：

• 首先从react-router-dom里导入withRouter
• 把你的Header组件用withRouter包裹后导出

示例代码：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Header extends Component {
  render() {
    // 现在就能直接访问this.props.location了
    console.log('当前路由:', this.props.location.pathname);
    return (
      <header>
        {/* 你的Header内容 */}
      </header>
    );
  }
}

// 关键一步：用withRouter包裹后导出
export default withRouter(Header);

2. 函数组件：用useLocation钩子（React Router 5.1+及6+） #

如果你的Header是函数组件，那就更方便了，直接用React Router提供的useLocation钩子，不需要任何额外包裹，就能拿到当前的location对象。

示例代码：

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

const Header = () => {
  const location = useLocation();
  console.log('当前路由:', location.pathname);
  
  return (
    <header>
      {/* 你的Header内容 */}
    </header>
  );
};

export default Header;

3. React Router 6+ 类组件的替代方案 #

React Router 6里移除了官方的withRouter高阶组件，如果你的项目用的是v6，又不想把类组件改成函数组件，可以自己封装一个简易的HOC，利用useLocation来传递路由props：

import { useLocation, useNavigate, useParams } from 'react-router-dom';
import React from 'react';

const withRouter = (Component) => {
  const Wrapper = (props) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} location={location} navigate={navigate} params={params} />;
  };
  return Wrapper;
};

// 然后像之前一样用这个自定义的withRouter包裹Header组件
export default withRouter(Header);

额外小提示 #

不管用哪种方案，都要确保你的Header组件是在<BrowserRouter>（或者其他Router组件）的内部，不然路由上下文找不到，肯定拿不到location信息哦！

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