如何正确引用其他路由文件？

Question

当我使用react和react-routerd-dom v6+创建路由时遇到问题。

我的项目树

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

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;

以及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;

错误信息是

[AuthRoutes] 不是组件。的所有子组件必须是 a 或

我尝试过的事情

1. 在authRoutes.jsx中将

   <>

   和

   </>

   更改为

   <React.Fragment>

   和

   </React.Fragment>

   ，仍然是同样的错误。

2. 在authRoutes.jsx中将

   <>

   和

   </>

   更改为

   <Routes>

   和

   </Routes>

   ，仍然是同样的错误。

3. 将

   <Route path="/auth/login" element={<Login />} />

   改为

   <Route path="/auth/login" element={ Login } />

   ，还是同样的错误。

请帮我纠正代码中的错误。

Answer 1

问题解决了。

更新 authRoutes.jsx

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Login from '../pages/Auth/Login';

const AuthRoutes = () => {
  return (
    <Routes>
      <Route path="/auth/login" element={<Login />} />
    </Routes>
  );
}

export default AuthRoutes;

并更新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 />} />
        <Route path="*" element={<AuthRoutes />} />
      </Routes>
    </Router>
  );
}

export default AllRoutes;

现在可以了。但这个解决方案给了我另一个问题。

authRoutes.jsx 返回

<Routes>
 <Route path="/auth/login" element={<Login />} />
</Routes>

被index.jsx引用时，index.jsx返回

<Router>
 <Routes>
   <Route path="/" element={<MainPage />} />
   <Route path="*" element={<AuthRoutes />} />
 </Routes>
</Router>

它的结构是这样的

<Router>
 <Routes>
  <Route>
  <Routes>
   <Route>
  </Routes>
 </Routes>
</Router>

看起来很奇怪。