solid-js - 在 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>
    );
};

这是我的重定向组件:

从“solid-app-router”导入{useNavigate}；

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

这种后备路由设计适用于react-router，但它不适用于solid-app-router。这不是唯一的路线设计，我也尝试了基于配置/阵列的路线设计，并遇到了同样的问题。我愿意接受有关如何正确实现此功能的建议。

Answer 1

正如另一位评论者所说，我的后备路线代码实际上确实有效。这是一个 react 性问题。

当页面首次加载时，isAuthenticated() 返回 false，因为身份验证检查是尚未运行的 ajax 调用。因此/categories 路由不会被渲染，如果我尝试手动导航到/categories，我会通过重定向来代替。这使得包罗万象的路线看起来好像覆盖了一切，而实际上它的行为符合预期。

我添加了另一项检查，以防止路由渲染，直到进行身份验证检查 ajax 调用之后，然后一切正常。