首页  >  问答  >  正文

React Router v6:无法正确捕获所有路径中的“*”字符问题解决方案

<p>我有以下两个文件</p> <p><strong>AppRoutes.tsx</strong></p> <pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { Route, Routes }; 从“../pages/NotFound”导入NotFound; 从“../features/messages/routes/MessageRoutes”导入 MessageRoutes; 从“../pages/Home”导入主页; 导出默认函数 AppRoutes() { 返回 ( <路线> <路线路径="/" element={<首页/>} /> <路由路径="/messages/*" element={} /> <路线路径=“*”元素={<NotFound />} /> gt; </路线> ); }</pre> <p><strong>MessageRoutes.tsx</strong></p> <pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { Route, Routes }; 从“../../../routes/ProtectedRoutes”导入ProtectedRoutes; 从“../pages/MessageOverview”导入 MessageOverview; 从“../pages/NewMessage”导入NewMessage; 导出默认函数 MessageRoutes() { 返回 ( <路线> <路由元素={<受保护的路由/>}> } />> <路由路径=“/new”元素={}/>/> </路线> </路线> ); }</pre> <p>因为我使用路径 "/messages/*" 来捕获以 /messages 开头的所有路径,所以我的 MessageRoutes 组件负责处理这些路由路由。我在 AppRoutes 组件中有一个最终的 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum",react router 不会捕获 NotFound 路由,因为以 "/messages" 开头的所有内容都将由 MessageRoutes 组件处理。</p> <p>这是否意味着在每个路由路由组件中,我现在都必须重新添加一个结束的 <code><route path="*" element="{<NotFound" =""> ;} /></route></code>,能支持最终的所有路由的路由吗?我不喜欢这种方法。顾没有绝对的最终捕获所有路由的方法吗?</p>
P粉579008412P粉579008412443 天前456

全部回复(1)我来回复

  • P粉458913655

    P粉4589136552023-08-26 17:20:32

    是的,绝对可以。每个Routes组件都管理着自己可以匹配的路由的“范围”。例如,如果当前的URL路径是"/messages/loremipsum",根Routes组件会匹配"/messages/*",并正确渲染MessageRoutes组件。然后,MessageRoutes组件的Routes组件会继续匹配下一个路径段。由于没有"*/loremipsum"的路由路径,您需要另一个“catch-all”路由来处理这个。

    问题在于Routes组件不知道它的任何路由可能渲染的后代路由。

    示例:

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

    如果您想要一个单独的“catch-all”路由,那么您需要一个单独的路由配置。

    示例:

    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"时,这个Routes组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFound

    回复
    0
  • 取消回复