在 SolidJS 中，我如何做一个后备路由？答案

【问题标题】：In SolidJS, How Do I Do a Fallback Route?在 SolidJS 中，我如何做一个后备路由？
【发布时间】：2022-10-31 06:52:14
【问题描述】：

我是 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。这不是唯一的路线设计，我也尝试了基于配置/阵列的路线设计并且遇到了同样的问题。我愿意接受有关如何正确实现此功能的建议。

【问题讨论】：

我在 stackblitz 中模仿了您的代码，并且我没有看到后备覆盖其他路线的任何问题。链接：stackblitz.com/edit/vitejs-vite-xeugum

标签： solid-js

【解决方案1】：

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

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

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

【讨论】：