React路由拆分至独立文件后出现Invalid hook call错误如何解决

你的报错核心是路由渲染时错误调用了组件函数，没有按照React组件标准渲染流程执行，导致hook调用上下文非法：

• react-router中Route组件的render属性要求传入一个返回React元素的回调函数，而你直接将组件构造函数Component赋值给了render属性。
• 这种写法会导致react-router执行渲染逻辑时，直接把Component作为普通函数调用，而非通过React.createElement创建组件实例，组件内部的useStyles hook自然不在合法的函数组件调用上下文内，就触发了Invalid hook call错误。

两种任选其一即可：

方案1：直接使用component属性（推荐，和你拆分前的写法逻辑一致） #

修改App.js中遍历路由的代码，把render={Component}替换为component={Component}即可：

{routes.map(({ path, Component }, key) => (
  <Route exact path={path} component={Component} key={key} /> 
))}

注意不要忘记给map遍历的元素加key属性，避免React警告。

方案2：修正render属性的写法 #

如果你需要在渲染组件前做额外逻辑处理，就按照render属性的要求传入返回组件元素的回调：

{routes.map(({ path, Component }, key) => (
  <Route 
    exact 
    path={path} 
    key={key}
    render={(routeProps) => <Component {...routeProps} />} 
  /> 
))}

这种写法还会自动把路由相关的match、location、history等props传递给目标组件，不影响路由参数的读取。

额外提醒：你当前App.js中已经手动写了/login对应的Route配置，和routes.js里的/login配置重复，建议删掉其中一个避免后续出现路由匹配冲突。

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