嵌套路由在 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;

Answer 1

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

Answer 2

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

Answer 3

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>