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

我不知道为什么你需要在另一个功能组件中创建路由，你可以在 App.js 中使用 react router 6 创建嵌套路由：

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

Answer 2

父路由路径没有尾随“*”。这意味着如果您导航得更深，父路由将不再匹配，因此子路由将永远不会呈现。

你应该改变：

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

至：

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

Answer 3

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

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

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

Nested Routing Not Working in React Router v6

reactjs

react-router

react-router-dom

备选方案