首页react-app 配置二级路由报错 Uncaught SyntaxError: Unexpected token '<'

react-app 配置二级路由报错 Uncaught SyntaxError: Unexpected token '<'

时间: 2023-11-17 13:04:21 浏览: 187

在使用 React-Router-DOM v6 版本时，可以使用 useRoutes 钩子来统一管理路由表。在 App 组件中使用 useRoutes 钩子返回的元素即可。下面是一个使用函数组件返回的例子： ```javascript import * as React from "react"; import { useRoutes } from "react-router-dom"; function App() { let element = useRoutes([ { path: "/", element: <Dashboard />, children: [ { path: "messages", element: <DashboardMessages /> }, { path: "tasks", element: <DashboardTasks /> }, ], }, { path: "team", element: <AboutPage /> }, ]); return element; } ``` 如果在使用 Vite 构建的项目中，出现了类似于 "Uncaught SyntaxError: Unexpected token '<'" 的报错，可能是因为 Vite 默认不支持在 JavaScript 文件中使用 JSX 语法。需要在项目根目录下的 `vite.config.js` 文件中添加以下配置： ```javascript import reactRefresh from '@vitejs/plugin-react-refresh'; export default { plugins: [reactRefresh()], esbuild: { jsxInject: `import React from 'react'`, }, }; ``` 这样就可以在 JavaScript 文件中使用 JSX 语法了。如果还是出现报错，可以尝试在 `index.html` 文件中添加以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/index.js"></script> </body> </html> ```

阅读全文