/**/

我有以下两份文件

AppRoutes.tsx

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

MessageRoutes.tsx

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

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

因为我使用路径"/Messages/*"来捕获所有以/Messages开头的路径,所以我的MessageRoutes组件负责处理这些嵌套的路由.我在AppRoutes组件中有一个最后的"*"路径来捕获应用程序不支持的任何url.但是,如果路径是"/Messages/lorefipsum",Reaction路由不会捕获NotFound路由,因为所有以"/Messages"开头的内容都将由MessageRoutes组件处理.

这是否意味着在每个嵌套的路由组件中,我现在必须再次添加最后一个<Route path="\*" element={\<NotFound /\>} /\>,才能支持最终的全部捕获路由?我不喜欢这种方式.难道每条路由都没有绝对的终极目标吗?

推荐答案

这是否意味着我现在必须在每个嵌套的管线组件中添加 又一次打进了<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.

Javascript相关问答推荐

将 javascript 数组转换为 Float32Array 以缓冲和返回

如何解构函数的返回值?

如何在 React Native 中对过滤器函数进行单元测试?

我可以从 DOM 触发 Phaser 3 事件吗?

无法在 Cypress 中将 skip-test 用作自定义命令

以相同的速率同时滚动具有可变内容长度的多个 DIV

如何使用 SVG 制作半圆形装载机?

为什么我会收到“Possible Unhandled Promise Rejection (id:0):”控制台警告以及如何摆脱它

如何在 $ctrl 之后匹配有效的属性访问.在 js 中使用正则表达式?

将两个功能合二为一

如何为字符串符号创建循环?

我可以使用 for 语句创建包含 api 数据的数组吗?

如何删除正则表达式中特殊字母后的括号

将返回 OR 运算符的函数传递给 React 中的其他东西

“this.has”表达式中的“has”从何而来?

在 React Native 中将值从一个组件传递到另一个组件

使用 jQuery 将特定文本字符串包装在带有 的 HTML 标记内

根据Angular 查找椭圆中点的坐标

如何用数组中的字符串替换所有出现的字符串

如何绘制闭合曲线?