React Router使用render={组件}触发无效Hook调用问题求助

首先咱们先把问题的核心原因说清楚：
Route组件的render prop要求接收一个返回React元素的函数，当你直接传Log的时候，React Router会把它当作普通函数直接执行（也就是Log()），而不是把它作为一个React组件去渲染。这时候Hooks（比如你的useState）是在普通函数调用的上下文中执行的，违反了Hooks必须在函数组件顶层调用的规则，所以就抛出了错误。

而render={() => <Log />}能正常工作，是因为这里我们创建了一个匿名函数，函数内部是通过JSX渲染Log组件——这相当于让React把Log当作一个真正的组件实例去处理，Hooks也就处于正确的组件上下文中了。

解决方案：既用组件式写法，又拿到路由参数 #

你有两个靠谱的方案可以选：

方案1：改用component prop代替render

React Router的component prop专门用来接收组件，它会自动把路由相关的props（match、location、history）传递给组件，同时正确地以组件方式渲染，Hooks自然就能正常工作：

<Route path="/log/:logID" exact component={Log} />

这样你的Log组件就能通过props拿到match.params.logID了，比如：

function Log({ match }) {
  const [someState, setSomeState] = useState('');
  console.log(match.params.logID);
  return <div>Log {match.params.logID}</div>;
}

方案2：在render的箭头函数中传递路由props

如果你还是想用render prop（比如需要额外传递自定义props的场景），可以把路由的props解构传递给组件：

<Route path="/log/:logID" exact render={(props) => <Log {...props} />} />

这样Log组件同样能拿到match、location这些路由props，同时Hooks也能正常运行。

关于其他可能原因的排查 #

虽然根据你的描述，问题核心是路由prop的使用方式，但如果上面的方案还是没解决问题，可以再排查一下：

• 检查React和React DOM的版本是否一致，确保没有版本不匹配的情况
• 确认你的项目中没有多个React副本（可以通过npm ls react命令查看依赖树，排查是否有重复依赖）

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