使用useRoutes提示invalid hook call

wangshang1320

于 2024-02-05 12:00:33 发布

阅读量364

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/wangshang1320/article/details/136039331

版权

文章讲述了在使用Vite、React和TypeScript构建项目时遇到关于在BrowserRouter中使用hooks的错误。开发者分享了错误原因——hooks只能在组件体或函数体内使用，并提供了修改后的代码片段以解决问题，强调了基础学习和文档阅读的重要性。

摘要由CSDN通过智能技术生成

包版本：

问题：今天用vite+react+ts重新搭建项目时报错

代码：

router.tsx

import { useRoutes } from 'react-router-dom';
import Home from "../pages/home/index";

const routers=[{
  path: '/',
  element: <Home/>
}
]
// const Router
export const Router = useRoutes(routers);

app.tsx

import React  from 'react'
import './App.css'
import {BrowserRouter} from "react-router-dom";
import {Router} from "./config/router";

function App() {
  return (
    <div>
      <BrowserRouter >
        <Router/>
      </BrowserRouter>
    </div>
  )
}

export default App

原因：

hooks只能在组件体或者函数体内使用

参考：useRouter() throws "Invalid hook call" when extending React.Component · Issue #8244 · vercel/next.js · GitHub

解决：

router.tsx

import { useRoutes } from 'react-router-dom';
import Home from "../pages/home/index";

const routers=[{
  path: '/',
  element: <Home/>
}
]
// const Router
export const Router = ()=>useRoutes(routers);