React Router v6: 모든 경로 문제 해결 방법에서 "*" 문자를 올바르게 캡처할 수 없습니다

Question

저는 아래에 있습니다

AppRoutes.tsx

import { Route, Routes } from "react-router-dom";
"../pages/NotFound"에서 NotFound를 가져옵니다.
"../features/messages/routes/MessageRoutes"에서 MessageRoutes를 가져옵니다.
"../page/Home"에서 홈을 가져옵니다.

기본 함수 AppRoutes() 내보내기 {
  반품 (
    <경로>
      <경로 경로="/" 요소={<홈 />} />
      <Route path="/messages/*" 요소={<MessageRoutes />} />
      <경로 경로="*" 요소={<NotFound />} />
    </경로>
  );
}

MessageRoutes.tsx

import { Route, Routes } from "react-router-dom";
"../../../routes/ProtectedRoutes"에서 ProtectedRoutes를 가져옵니다.
"../pages/MessageOverview"에서 MessageOverview를 가져옵니다.
"../page/NewMessage"에서 NewMessage를 가져옵니다.

기본 함수 내보내기 MessageRoutes() {
  반품 (
    <경로>
      <경로 요소={<ProtectedRoutes />}>
        <경로 경로="/" 요소={<MessageOverview />} />
        <Route path="/new" 요소={<NewMessage />} />
      </경로>
    </경로>
  );
}

因为我使用路径 "/messages/*" 来捕获以 /messages 开头的所有路径，所以我的 MessageRoutes 组件负责处理这些嵌套路由。我些嵌套路由。저는 AppRoutes에서中有一个最终의 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum"，react router 不会捕获 NotFound 路由，因为以 "/messages" 开头的所有内容容将由 MessageRoutes 组件处理。

这是否意味着지금每个嵌套路由组件中，我现再次添加一个最终的 ;}/& gt;/lt;/route & gt; & lt;/code & gt;, code & gt;, 以 支持 最终 最终 的 捕获 所有 路 由？？ 我 不 喜欢 喜欢 这 种 方法。。 难道 没有 绝对 的 最终 所有 路 由 由 的 方法 方法 吗？？ & lt;/p & gt;

Answer 1

네, 물론이죠. 각 Routes组件都管理着自己可以匹配的路由的“范围”。例如，如果当前的URL路径是"/messages/loremipsum"，根Routes组件会匹配"/messages/*"，并正确渲染MessageRoutes组件。然后，MessageRoutes组件的Routes组件会继续匹配下一个路径段。由于没有"*/loremipsum" 경로 경로에 대해 이를 처리하려면 또 다른 "포괄" 경로가 필요합니다.

문제는 Routes 구성 요소가 해당 경로가 렌더링할 수 있는 descendant 경로를 인식하지 못한다는 것입니다.

예:

으아악 으아악

별도의 "포괄" 경로를 원하는 경우 별도의 경로 구성이 필요합니다.

예:

으아악

이제 URL 경로가 "/messages/loremipsum"일 때 "/messages/loremipsum"时，这个Routes组件知道它正在渲染的嵌套路由，并且可以正确匹配并渲染NotFound이

🎜 구성 요소는 렌더링 중인 🎜🎜중첩 🎜🎜 경로를 인식하고 를 올바르게 일치시키고 렌더링할 수 있습니다. 찾을 수 없음. 🎜