Recibo este mensaje en la consola, traté de agregar la propiedad de índice en el elemento pero no representé el elemento. El problema está en journalRoutes pero no veo el problema.
JournalRoutes.jsx:
import React from 'react' import { Route, Routes } from 'react-router-dom' import { JournalPage } from '../pages/JournalPage' export const JournalRoutes = () => { return ( <Routes> <Route path="/" index element={<JournalPage/>}/> <Route path='*' element={<JournalPage/>}/> </Routes> ) }AppRouter.jsx:
import React from 'react' import { Route, Routes } from 'react-router-dom' import {AuthRoutes} from "../auth/routes/AuthRoutes" import { JournalRoutes } from '../journal/routes/JournalRoutes' export const AppRouter = () => { return ( <Routes> <Route path='/auth/*' element={<AuthRoutes/>}/> <Route path='/journal' element={<JournalRoutes/>}/> </Routes> ) }JournalApp.jsx:
import React from "react"; import { AppRouter } from "./router/AppRouter"; import { AppTheme } from "./theme/AppTheme"; export const JournalApp = () => { return ( <AppTheme> <AppRouter/> </AppTheme> ); };Principal.jsx:
import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import { JournalApp } from './JournalApp' import { BrowserRouter} from "react-router-dom" ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <BrowserRouter> <JournalApp /> </BrowserRouter> </React.StrictMode> )El problema está en AppRouter que representa el componente de Routes raíz. No está representando ninguna ruta "/" . La ruta de ruta "/" en JournalRoutes se crea en relación con la ruta de ruta "/journal" de la Route que representa JournalRoutes .
Solo necesita representar una ruta en "/" en la aplicación. Puede representar cualquier cosa, incluida una redirección a "/journal" que es lo que consideras que es la "página de inicio".
Ejemplo:
import React from 'react'; import { Route, Routes, Navigate } from 'react-router-dom'; import { AuthRoutes } from "../auth/routes/AuthRoutes"; import { JournalRoutes } from '../journal/routes/JournalRoutes'; export const AppRouter = () => { return ( <Routes> <Route path='/auth/*' element={<AuthRoutes />} /> <Route path='/journal/*' element={<JournalRoutes />} /> <Route path="/" element={<Navigate to="/journal" />} /> // <-- path "/" </Routes> ); }; Además, aunque tanto la path como index son accesorios opcionales, generalmente no desea especificar ambos al mismo tiempo. Elimina uno u otro.
Ejemplo:
export const JournalRoutes = () => { return ( <Routes> <Route path="/" element={<JournalPage />} /> <Route path='*' element={<JournalPage />} /> </Routes> ); };o
export const JournalRoutes = () => { return ( <Routes> <Route index element={<JournalPage />} /> <Route path='*' element={<JournalPage />} /> </Routes> ); };creo que puedes deshacerte de JournalRoutes y hacer esto en tu AppRouter en su lugar
<Routes> <Route path='/auth/*' element={<AuthRoutes/>}/> <Route path='/journal'> <Route index element={<JournalRoutes/>}/> // this will route to /journal/sample but you should use Outlet to show nested routes in v6 <Route path='sample' element={<Sample/>}/> <Route path='*' element={<NotFound/>}/> </Route> </Routes>Creo que podrías organizar tus rutas algo así:
import React from 'react' import { Route, Routes, Outlet } from 'react-router-dom' import {AuthRoutes} from "../auth/routes/AuthRoutes" import { JournalRoutes } from '../journal/routes/JournalRoutes' export const AppRouter = () => { return ( <Routes> <Route path="/" element={<div>Add whatever you want at / route here</div>}/> <Route path='/auth/*' element={<AuthRoutes/>}/> <Route path='/journal' element={<Outlet/>}> <Route index element={<JournalPage/>}/> <Route path='*' element={<JournalPage/>}/> </Route> </Routes> ) }