React Router v6中如何正确打包及导出多个路由供外部调用？

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

const AuthRoutes = () => {
  return (
    <Routes>
      <Route path="/auth/login" element={<Login />} />
      {/* 其他认证路由 */}
    </Routes>
  );
};

export default AuthRoutes;

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MainPage from '../pages/MainPage';
import AuthRoutes from './authRoutes';

const AllRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/auth/*" element={<AuthRoutes />} /> {/* 使用嵌套路由 */}
      </Routes>
    </Router>
  );
};

export default AllRoutes;

import React from 'react';
import AllRoutes from './routes/index';
import './App.scss';

function App() {
  return (
    <div className="App">
      <AllRoutes />
    </div>
  );
}

export default App;

// routes/index.js
const routes = [
  { path: '/', element: <MainPage /> },
  { path: '/auth/login', element: <Login /> },
  // ... other routes
];

export default routes;

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import routes from './routes';

function App() {
  return (
    <Router>
      <Routes>
        {routes.map((route) => (
          <Route key={route.path} {...route} />
        ))}
      </Routes>
    </Router>
  );
}

export default App;