javascript - React 中如何正确的将多个路由打包给外部调用？

Question

我在用 react 写一个网页项目，其结构大概如下

my-react-app/|-- src/|   |-- components/|   |-- pages/|   |   |-- MainPage.jsx|   |   |-- Auth/|   |   |   |-- Login.jsx|   |-- routes/|   |   |-- authRoutes.jsx|   |   |-- index.jsx|   |-- App.jsx|   |-- index.js|-- public/|   |-- index.html|-- package.json

路由用的是 react-router-dom v6.0+。在路由文件夹 routes 中，其中 authRoutes.jsx 这个文件是用来管理注册登录等路由的，代码如下

import React from 'react';import { Route } from 'react-router-dom';import Login from '../pages/Auth/Login';const AuthRoutes = () => {  return (    <>      <Route path="/auth/login" element={<Login />} />    </>  );}export default AuthRoutes;

而 routes/index.jsx 这个文件是用来把所有的路由都打包出去的，其代码如下

import React from 'react';import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';import MainPage from '../pages/MainPage';import AuthRoutes from './authRoutes';const AllRoutes = () => {  return (    <Router>      <Routes>        <Route path="/" element={<MainPage />} />        <AuthRoutes />      </Routes>    </Router>  );}export default AllRoutes;

在 app.jsx 中引入如下

import React from 'react';import AllRoutes from './routes';import './App.scss'function App() {  return (    <div className="App">      <AllRoutes />          </div>  );}export default App;

我现在遇到的问题是总是提示错误，错误信息是

[AuthRoutes] is not a component. All component children of must be a or <React.Fragment>

我做了一些尝试

1. 将 authRoutes.jsx 文件中的 <> 和 </> 改成了 <React.Fragment> 和 </React.Fragment>，还是同样的错误。
2. 同样，将它们改成 <Routes>，也是同样的错误。
3. 将 <Route path="/auth/login" element={<Login />} /> 改成了 <Route path="/auth/login" element={ Login } />，还是同样的错误。
4. 将 routes/index.jsx 中的 <AuthRoutes /> 改成 <Route path="/" element={<AuthRoutes />} />，错误没了，但访问 /auth/login，提示 /auth/login 路径并不存在。

Answer 1

将 <AuthRoutes /> 改成 {AuthRoutes()} 就行了