I'm getting this message in the console, i tried to add the index property on the element but no render the element. The problem is in the journalRoutes but i don't see the problem.
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>
);
};
Main.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>
)
The issue is in AppRouter rendering the root Routes component. It isn't rendering any "/" path. The "/" route path in JournalRoutes is built relative from the "/journal" route path of the Route rendering JournalRoutes.
You just need to render a route on "/" in App. It can render anything, including a redirect to "/journal" is that is what you consider to be the "home page".
Example:
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>
);
};
Additionally, while both path and index are optional props, you don't generally want to specify both at the same time. Remove one or the other.
Exmaple:
export const JournalRoutes = () => {
return (
<Routes>
<Route path="/" element={<JournalPage />} />
<Route path='*' element={<JournalPage />} />
</Routes>
);
};
or
export const JournalRoutes = () => {
return (
<Routes>
<Route index element={<JournalPage />} />
<Route path='*' element={<JournalPage />} />
</Routes>
);
};
i think you can git rid of the JournalRoutes and do this in your AppRouter instead
<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>
I think you could organise your routes something like this:
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>
)
}