CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
huzaifac137
huzaifac137

Reputation: 142

Nested Routing Not Working in React Router v6

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;

Upvotes: 6

Views: 7936

Answers (3)

Drew Reese
Drew Reese

Reputation: 202721

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

Edit nested-routing-not-working-in-react-router-v6

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

Edit nested-routing-not-working-in-react-router-v6 (forked)

Upvotes: 8

S.Marx
S.Marx

Reputation: 1022

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

Upvotes: 1

besartm
besartm

Reputation: 568

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>

Upvotes: 0

Related Questions