React Router v6: Tidak dapat menangkap aksara "*" dengan betul dalam semua penyelesaian masalah laluan

Question

我有以下两个文件

AppRoutes.tsx

import { Route, Routes } daripada "react-router-dom";
import NotFound daripada "../pages/NotFound";
import MessageRoutes daripada "../features/messages/routes/MessageRoutes";
import Laman Utama daripada "../pages/Home";

eksport fungsi lalai AppRoutes() {
  kembali (
    <Laluan>
      <Laluan laluan="/" elemen={<Laman Utama />} />
      <Route path="/messages/*" element={<MessageRoutes />} />
      <Laluan laluan="*" elemen={<Tidak Ditemui />} />
    </Laluan>
  );
}

MessageRoutes.tsx

import { Route, Routes } from "react-router-dom";
import ProtectedRoutes daripada "../../../routes/ProtectedRoutes";
import MessageOverview daripada "../pages/MessageOverview";
import NewMessage daripada "../pages/NewMessage";

eksport fungsi lalai MessageRoutes() {
  kembali (
    <Laluan>
      <Elemen laluan={<ProtectedRoutes />}>
        <Route path="/" element={<MessageOverview />} />
        <Route path="/new" element={<NewMessage />} />
      </Laluan>
    </Laluan>
  );
}

因为我使用路径 "/message/*" 来捕获以 /message 开头的所有路径，所以我的 MessageRoutes 组紗行路由。我在 AppRoutes 组件中有一个最终的 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum"，react router 不会捕获 NotFound 路由，是由是"有内容都将由 MessageRoutes 组件处理。

这是否意味着在每个嵌套路由组件中，我现在都必须再次添加一个;< Tidak Ditemui" =""> ;} />，以支持最终的捕获所有路由？我不喜欢这种方法。难有玉由所有路由的方法吗？

Answer 1

Ya, semestinya. Untuk setiap Routes组件都管理着自己可以匹配的路由的“范围”。例如，如果当前的URL路径是"/messages/loremipsum"，根Routes组件会匹配"/messages/*"，并正确渲染MessageRoutes组件。然后，MessageRoutes组件的Routes组件会继续匹配下一个路径段。由于没有"*/loremipsum" laluan laluan, anda memerlukan satu lagi laluan "tangkap semua" untuk mengendalikan perkara ini.

Masalahnya ialah komponen Routes tidak mengetahui sebarang laluan keturunan yang mungkin ditunjukkan oleh laluannya.

Contoh:

import { Route, Routes } from "react-router-dom";
import NotFound from "../pages/NotFound";
import MessageRoutes from "../features/messages/routes/MessageRoutes";
import Home from "../pages/Home";

export default function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/messages/*" element={<MessageRoutes />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

import { Route, Routes } from "react-router-dom";
import ProtectedRoutes from "../../../routes/ProtectedRoutes";
import MessageOverview from "../pages/MessageOverview";
import NewMessage from "../pages/NewMessage";
import NotFound from "../pages/NotFound";

export default function MessageRoutes() {
  return (
    <Routes>
      <Route element={<ProtectedRoutes />}>
        <Route path="/" element={<MessageOverview />} />
        <Route path="/new" element={<NewMessage />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

Jika anda mahukan laluan "catch-all" yang berasingan, maka anda memerlukan konfigurasi laluan yang berasingan.

Contoh:

import { Route, Routes } from "react-router-dom";
import MessageOverview from "../pages/MessageOverview";
import NewMessage from "../pages/NewMessage";
import NotFound from "../pages/NotFound";
import Home from "../pages/Home";

export default function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route element={<ProtectedRoutes />}>
        <Route path="/messages">
          <Route index element={<MessageOverview />} />
          <Route path="new" element={<NewMessage />} />
        </Route>
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

Sekarang, apabila laluan URL ialah "/messages/loremipsum", "/messages/loremipsum"时，这个Routes组件知道它正在渲染的嵌套路由，并且可以正确匹配并渲染NotFoundkomponen

🎜 ini menyedari laluan 🎜🎜bersarang 🎜🎜 ia sedang dipaparkan dan boleh memadankan dan memberikan dengan betul Tidak Ditemui . 🎜