我现在已经在SPA应用程序中设置了此路由
export const routes: RouteObject[] = [
{
index: true,
element: <Landing />,
},
{
path: '/',
element: <FormLayout />,
children: [/* ... */],
},
{ path: '*', element: <Navigate to="/" /> },
];
如何使用混合文件结构路由实现相同的结果?
1条答案
按热度按时间x4shl7ld1#
据我所知,您有一个Landing组件,它是一个布局(因此,我假设您渲染了一个Outlet?)和一个FormLayout,当用户位于
/
时,它在Landing布局内渲染,然后对于任何其他路径,您重定向到/
,对吗?假设这是正确的,你必须这样做:
这个
routes/__landing.tsx
叫做Pathless Layout Route,它是一个不会向URL添加段的布局路径,因此最终的URL将是/
而不是/__landing
。在这个文件中,您应该呈现一个<Outlet />
,其中嵌套的路径将被呈现。/routes/__landing/index.tsx
是routes/__landing.tsx
内部的嵌套路径,该路径的组件将在父路径放置<Outlet />
的位置呈现。所有index
文件都与URL/
匹配。routes/$.tsx
是一个splat路由(或catch-all路由),它将匹配每个其他URL,在那里你可以放一个重定向如下:但是我建议你不要把所有的路由都重定向到
/
,而是用正确的404状态代码呈现一个未找到的页面。你可以把错误页面放在root.tsx
文件CatchBoundary或ErrorBoundary导出中。