如何为非<Route>渲染的SidebarMenu组件传递路由相关Props？

嘿，这个问题我之前也碰到过！React Router里只有直接通过<Route>渲染的组件才会自动注入match、location、history这些路由相关props，像你直接在DashboardPage里渲染的SidebarMenu自然拿不到。给你几个靠谱的解决办法：

1. 使用withRouter高阶组件（React Router v5及更早版本） #

这是最经典的方案，只需要用withRouter把你的SidebarMenu组件包裹起来，它就会自动获得路由相关的props：

• 首先在SidebarMenu组件文件里导入withRouter：

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

• 然后把组件导出的时候用withRouter包裹：

  class SidebarMenu extends React.Component {
    // 现在this.props.match、this.props.location、this.props.history都能正常使用了
    componentDidMount() {
      console.log(this.props.match.params); // 不再是空对象啦
    }
    // ...其他代码
  }
  export default withRouter(SidebarMenu);
  

这样不管你在哪里直接渲染SidebarMenu，它都能拿到路由相关的props了。

2. 使用路由钩子函数（React Router v6+） #

如果你的项目用的是React Router v6，withRouter已经被移除了，这时候可以用官方提供的钩子函数，适合函数式组件：

• 在SidebarMenu组件里直接导入并使用对应的钩子：

  import { useParams, useLocation, useNavigate } from 'react-router-dom';
  
  function SidebarMenu() {
    const params = useParams(); // 获取路由参数，对应之前的match.params
    const location = useLocation(); // 获取当前location对象
    const navigate = useNavigate(); // 用来跳转路由，对应之前的history.push
    console.log(params); // 这里就能拿到你需要的参数了
    // ...其他代码
  }
  export default SidebarMenu;
  

3. 手动传递路由props（通用但不够优雅） #

如果你不想用高阶组件或者钩子，也可以直接在DashboardPage里把自己的路由props传给SidebarMenu：

class DashboardPage extends React.Component {
  render() {
    return (
      <div>
        <SidebarMenu 
          match={this.props.match} 
          location={this.props.location} 
          history={this.props.history} 
        />
        {/* 你的路由组件渲染 */}
        <Route path="/dashboard/account" component={Account} />
      </div>
    );
  }
}

这种方法虽然可行，但如果多个组件都需要的话会很繁琐，不如前两种方案省心。

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