React Router v6中嵌套路由无法正常工作

Question

我尝试使用带动态值的嵌套路由。在App.js中的普通路由有效，但在QouteDetail中的嵌套路由没有显示任何内容。控制台显示“NO ROUTES MATCHED LOCATION”。有人可以告诉我问题出在哪里吗。

代码：

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;

- huzaifac137

---

你不需要在Router v6中使用“exact”。 - Moiz Sheikh

@MoizSheikh，它仍然无法在报价详情中呈现嵌套路由。你能告诉我出了什么问题吗？ - huzaifac137

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

- Drew Reese

Answer 2

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

你应该更改：

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

to:

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

- S.Marx

---

这种方法不会呈现在报价详情中路由的注释组件。 - huzaifac137

你只收到了那个错误吗？我在 Codesandbox 中创建了一个示例，并添加了 *，它可以正常工作。 - S.Marx

是的，只有那个东西会引起问题。如果我像你说的那样添加*，那么渲染的将不再是评论组件，而是相同的quoteDetails组件。 - huzaifac137

Answer 3

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

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

- besartm

---

这个可以工作，但我将其嵌套在其他组件中，以便进行动态路由，但我认为这种方式行不通。 - huzaifac137

你做错了，你需要像我在App.js中那样声明嵌套路由，如果你需要跳转到其他路由，你可以使用：<Link to='/quotes/${params.quoteID}/comments'，或者你可以使用react router v6的useNavigate。 - besartm

还有一件事，你可以在另一个组件中渲染组件，比如在QuoteDetails中渲染Comment，但是你不能在具有不同路由的另一个组件中渲染路由。 - besartm