React Router中内部函数如何获取props参数？

你的疑问核心其实很好理解，拆解一下：

1. ComponentWithRouterProp是什么？
   它本质就是一个React函数组件，是withRouter这个高阶组件返回的「包装组件」。当你用withRouter(connect(...)(MainPage))导出后，项目中实际渲染的是这个ComponentWithRouterProp，而非原本的MainPage类组件。

2. props从哪来？
   当React渲染这个ComponentWithRouterProp组件时，会自动把所有传递给它的外部props注入到这个函数的props参数里。结合你的代码场景具体说：

   • 首先connect(mapStateToProps)(MainPage)会生成一个新组件，这个组件会把Redux中的dishes作为props传递给MainPage；
   • 然后withRouter把这个组件包裹，返回ComponentWithRouterProp。此时当React渲染最终导出的组件时，原本connect传递的dishes就会成为ComponentWithRouterProp的props；
   • 如果之后你在使用这个导出组件时手动传入其他props（比如<MainPage title="首页" />），这些额外的props也会被包含在ComponentWithRouterProp的props参数里。

3. ComponentWithRouterProp的作用
   它拿到这些外部props后，会通过{...props}把它们原封不动地传递给真正的MainPage组件，同时额外添加router这个自定义props，把React Router的location、navigate、params这些能力注入进去，让原本的类组件MainPage也能拿到路由相关的信息。

举个直观的例子，假设你在某个地方这样使用导出的组件：

import MainPage from './MainPage';

<MainPage extraProp="test" />

那么ComponentWithRouterProp的props参数就会是{ dishes: ..., extraProp: "test" }，然后它会把这些都传递给MainPage，再加上router对象。

最后提醒：ComponentWithRouterProp使用了useLocation等React Router的hooks，所以这个组件必须被包裹在React Router的上下文提供者（比如<BrowserRouter>）内部，否则hooks会抛出错误。

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