Nested Routing Not Working in React Router v6

Question

im trying to use nested routing with dynamic values . Normal Routes in App.js are working but the nested route in QouteDetail is not showing anything . console says that " NO ROUTES MATCHED LOCATION " . Can somebody tell me what's wrong.

CODE :

import React from 'react';
import {Route , Routes } from "react-router-dom";
import AllQuotes from './components/AllQuotes';
import NewQuote from './components/NewQuote';
import QuoteDetail from './components/QuoteDetail';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<AllQuotes/>} />
        <Route path="/quotes" element={<AllQuotes/>} />
        <Route path="/new-quotes" element={<NewQuote/>} />
        <Route exact path="/quotes/:quoteID" element={<QuoteDetail/> } /> 
      </Routes>

    </div>
  );
}

export default App;

import React from 'react';
import { Route, Routes , useParams } from 'react-router-dom';
import Comments from './comments/Comments';

function QuoteDetail(props) {
    const params = useParams();
    return (
        <div>
            <h1>QUOTE DETAILS</h1>
            <h2>{params.quoteID}</h2>

            <Routes>
            <Route exact path={`/quotes/${params.quoteID}/comments`}  element= {<Comments/>} />  
            </Routes> 
        </div>
    );
}

export default QuoteDetail;

@MoizSheikh it still wouldn't render the nested route in Quote Detail. Can you tell whats wrong — huzaifac137
– huzaifac137, Commented Apr 17, 2022 at 11:35

Drew Reese · Accepted Answer · 2022-04-18 19:24:04Z

First, fix the invariant warning for the nested route you are trying to match.

You rendered descendant `<Routes>` (or called `useRoutes()`) at "/quotes/1234" (under `<Route path="/quotes/:quoteID">`) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent `<Route path="/quotes/:quoteID">` to `<Route path="/quotes/:quoteID/*">`. 
    in Routes (created by QuoteDetail)
    in QuoteDetail (created by App)
    in App

When nesting Routes components within other Routes components, the paths are built relative from the parent Routes component.

Given base Routes component:

<Routes>
  <Route path="/" element={<AllQuotes/>} />
  <Route path="/quotes" element={<AllQuotes/>} />
  <Route path="/new-quotes" element={<NewQuote/>} />
  <Route path="/quotes/:quoteID/*" element={<QuoteDetail/> } /> 
</Routes>

Use the path "/comments" to build relatively from the parent "/quotes/:quoteID" path.

function QuoteDetail(props) {
  const params = useParams();
  return (
    <div>
      <h1>QUOTE DETAILS</h1>
      <h2>{params.quoteID}</h2>

      <Routes>
        <Route path="/comments" element={<Comments />} />
      </Routes>
    </div>
  );
}

Alternative Solution

Alternatively you can move the nested route up to the main Routes component and render them nested there.

App

<Routes>
  <Route path="/" element={<AllQuotes />} />
  <Route path="/new-quotes" element={<NewQuote />} />
  <Route path="/quotes">
    <Route index element={<AllQuotes />} />
    <Route path=":quoteID" element={<QuoteDetail />}>
      <Route path="comments" element={<Comments />} />
    </Route>
  </Route>
</Routes>

Render an Outlet in QuoteDetail where you want the nested routes to be rendered out.

function QuoteDetail(props) {
  const params = useParams();
  return (
    <div>
      <h1>QUOTE DETAILS</h1>
      <h2>{params.quoteID}</h2>
      <Outlet />
    </div>
  );
}

S.Marx · Accepted Answer · 2022-04-17 12:01:28Z

1

The parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

You should change:

<Route path="/quotes/:quoteID" element={<QuoteDetail/> } />

to:

<Route path="/quotes/:quoteID/*" element={<QuoteDetail/> } />

answered Apr 17, 2022 at 12:01

S.Marx

1,03211 silver badges17 bronze badges

3 Comments

huzaifac137 Over a year ago

this approach doesnot render the comments component which is routed inside quote details

S.Marx Over a year ago

Are you getting only that error? I create and example in codesanbox and it worked adding the *

huzaifac137 Over a year ago

yes only that thing is causing problem if i add * like you said then instead of comments component same quoteDetails components is rendered

besartm · Accepted Answer · 2022-04-17 11:50:58Z

0

I don't know why you need to create route in another functional component, you can create nested routes in App.js with react router 6:

<Routes>
...
  <Route path="/quotes/:quoteID" element={<QuoteDetail/> }>
    <Route path="/quotes/:quoteID/coments" element={<Comments/>} />
  </Route>
</Routes>

answered Apr 17, 2022 at 11:50

besartm

5682 gold badges7 silver badges14 bronze badges

3 Comments

huzaifac137 Over a year ago

this works but i nested it inside other component in case of dynamic routing which i dont think works this way

besartm Over a year ago

You did it wrongly, you need to declare nested routes the way I did it in App.js than if you need to jump to other routes you can use: <Link to='/quotes/${params.quoteID}/comments', or you can use useNavigate of react router v6

besartm Over a year ago

One more thing you can render component inside another component like Comment inside QouteDetails but you cant render route inside another component which has different route

Collectives™ on Stack Overflow

Nested Routing Not Working in React Router v6

3 Answers 3

Alternative Solution

Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Alternative Solution

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related