在SolidJS中，我如何做一个回退路由?

Question

我是Solid JS的新手，主要来自React背景。我现在第一次使用Solid和Solid- app - router。

我想设计路线撤退,这意味着如果一个端点放入URL是不存在,它会重定向到一个默认的位置。我的问题是这个回退无论如何都在执行，覆盖了我所有的其他路由。

我将添加namedLazy工作得很好，只是一个包装器来支持SolidJS lazy()的命名导出。下面是我的路由代码:

import { namedLazy } from '../../utils/solidWrappers';
import { Routes, Route } from 'solid-app-router';
import { isAuthenticated } from '../../resources/AuthResources';
const Welcome = namedLazy(() => import('./Welcome'), 'Welcome');
const Categories = namedLazy(() => import('./Categories'), 'Categories');
const Redirect = namedLazy(() => import('../UI/Redirect'), 'Redirect');
export const AppRoutes = () => {
return (
<Routes>
<Route path="/welcome" element={<Welcome />} />
{isAuthenticated() && (
<Route path="/categories" element={<Categories />} />
)}
<Route path="*" element={<Redirect />} />
</Routes>
);
};

这里是我的Redirect组件:

import {useNavigate} from 'solid-app-router';

export const Redirect = () => {
const navigate = useNavigate();
navigate('/welcome');
return <></>;
};

这种回退路由设计在react-router中有效，但在solid-app-router中不起作用。这不是唯一的路线设计，我也尝试了基于配置/阵列的路线设计，也有同样的问题。我愿意听取关于如何正确实现此功能的建议。

Answer 1

正如另一位评论者所说，我的回退路径代码实际上是有效的。这是一个反应性问题。

当页面第一次加载时，isAuthenticated()返回false，因为身份验证检查是一个尚未运行的ajax调用。因此，/categories路由不会被渲染，如果我试图手动导航到/categories，我会重定向。这使得它看起来好像是覆盖了所有路由，而实际上它的行为是预期的。

我添加了另一个检查，以防止路由呈现，直到身份验证检查ajax调用之后，然后一切都工作得很好。