Estoy comenzando un nuevo proyecto usando React Router Dom v6 y tengo problemas con uno de los primeros pasos: configurar las rutas para la aplicación.

Acabo de crear dos páginas: AuthPage y DashboardPage y me gustaría poder representar ambas si, desde el navegador, navego a:

• localhost:PORT/ : debe mostrar DashboardPage
• localhost:PORT/auth: debe representar AuthPage

pero no, la única página representada es DashboardPage incluso si intento navegar a rutas que no existen.

Este es mi código hasta ahora:

principal.tsx

 import { createRoot } from 'react-dom/client' import { MemoryRouter as Router } from 'react-router-dom' import { ThemeProvider } from '@mui/material/styles' import { theme } from './theme' import App from './App' const root = createRoot(document.getElementById('root') as HTMLElement) root.render( <ThemeProvider theme={theme}> <Router> <App /> </Router> </ThemeProvider> )

Aplicación.tsx

 import { Route, Routes } from 'react-router-dom' import AuthPage from './pages/AuthPage' import DashboardPage from './pages/DashboardPage' import NotFoundPage from './pages/NotFoundPage' import { routes } from './routes' function App() { return ( <Routes> <Route path={routes.dashboard.url} element={<DashboardPage />} /> <Route path={routes.auth.url} element={<AuthPage />} /> <Route path={routes.notFound.url} element={<NotFoundPage />} /> </Routes> ) } export default App

rutas.ts

 export const routes = { auth: { url: '/auth' }, dashboard: { url: '/' }, notFound: { url: '*' } }