reactjs - 嵌套路由在 React Router v6 中不起作用

Question

我正在尝试使用具有动态值的嵌套路由。 App.js 中的正常路由正在运行，但 QouteDetail 中的嵌套路由未显示任何内容。控制台显示“没有路由匹配位置”。谁能告诉我哪里出了问题。

代码:

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

首先，修复您尝试匹配的嵌套路由的不变警告。

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

当将 Routes 组件嵌套在其他 Routes 组件中时，路径是相对于父 Routes 组件构建的。

给定基础 Routes 组件:

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

使用路径 "/comments" 相对于父 "/quotes/:quoteID" 路径构建。

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

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

替代方案

或者，您可以将嵌套路由向上移动到主要的 Routes 组件，并将它们嵌套在那里。

应用

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

在 QuoteDetail 中渲染一个 Outlet，您希望在其中渲染嵌套路由。

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