No routes matched location "/" react-router v6-CodePudding

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>
)

CodePudding user response：

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>
  );
};

export const JournalRoutes = () => {
  return (
    <Routes>
      <Route index element={<JournalPage />} />
      <Route path='*' element={<JournalPage />} />
    </Routes>
  );
};

CodePudding user response：

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>

CodePudding user response：

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>
  )
}