React Router v6: Tidak dapat menangkap aksara "*" dengan betul dalam semua penyelesaian masalah laluan
P粉579008412
2023-08-25 19:28:54
<p>我有以下两个文件</p>
<p><strong>AppRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre>
<p><strong>MessageRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre>
<p>因为我使用路径 "/message/*" 来捕获以 /message 开头的所有路径,所以我的 MessageRoutes 组紗行路由。我在 AppRoutes 组件中有一个最终的 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum",react router 不会捕获 NotFound 路由,是由是"有内容都将由 MessageRoutes 组件处理。</p>
<p>这是否意味着在每个嵌套路由组件中,我现在都必须再次添加一个;< Tidak Ditemui" =""> ;} /></route></code>,以支持最终的捕获所有路由?我不喜欢这种方法。难有玉由所有路由的方法吗?</p>
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:
Jika anda mahukan laluan "catch-all" yang berasingan, maka anda memerlukan konfigurasi laluan yang berasingan.
Contoh:
Sekarang, apabila laluan URL ialah
🎜 ini menyedari laluan 🎜🎜bersarang 🎜🎜 ia sedang dipaparkan dan boleh memadankan dan memberikan"/messages/loremipsum"
,"/messages/loremipsum"
时,这个Routes
组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFound
komponen