Javascript React 路由 v6：捕获所有*路径在使用嵌套路由时不起作用

这是否意味着我现在必须在每个嵌套的管线组件中添加 又一次打进了<Route path="\*" element={<NotFound />} \>强

是的，绝对的.每个Routes组件管理其自己的路由"范围"，以寻找它可以匹配的路由.例如，如果当前URL路径为"/messages/loremipsum"，则根Routes组件与"/messages/*"匹配，并正确呈现MessageRoutes组件.然后，MessageRoutes组件的Routes组件在下一路径段上进行匹配.由于没有"*/loremipsum"路由路径，因此您需要另一个"包罗万象"的路由来处理此问题.

问题是，Routes组件不知道它的任何路由may可能呈现的101路由是什么.

示例:

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

如果你想要有一个"包罗万象"的路由，那么你就需要有一个单一的路由配置.

示例:

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

现在，当/如果URL路径是"/messages/loremipsum"时，则this Routes组件知道它正在呈现什么103路由，并且可以匹配并且可以正确地呈现NotFound.