Vite React SSG 重定向

Question

我试图使用 vite-react-ssg 和 react-router-dom 在未设置路径时使我的网站重定向到 404 页面。由于预渲染，我需要使用 SSG。 我找不到任何有关如何执行此操作的文档。 vite-react-ssg

有人试过吗？ 可以这样做吗？

我尝试了这样的方法，但没有成功：

export const routes = [
  {
    path: '/',
    Component: Layout,
    children: [
      {
        path: '404',
        Component: lazy(() => import('@components/NotFound')),
      },
      {
        path: '*',
        redirect: '404',
      },
      ...
    ]
  },
]

我需要有关如何使用 vite-react-ssg 预渲染在 React 中重定向未配置路由的示例或文档。

Answer 1

我正在尝试，例如，如果它进入路径

"/no-configured"

它 将其重定向到路径

"/404"

，但它不起作用。

仅当 user 直接导航到客户端上的“/404”时，您所显示的内容才有效。如果您想定义重定向到此 404 路径/页面的“包罗万象”路由，则导入并使用 Navigate

 中的 

react-router-dom 组件并渲染重定向。

import { Navigate } from 'react-router-dom';

...

export const routes = [
  {
    path: '/',
    Component: Layout,
    children: [
      {
        path: '404',
        Component: lazy(() => import('@components/NotFound')),
      },
      {
        path: '*',
        element: <Navigate to="/404" replace />,
      },
      ...
    ]
  },
]

FWIW

redirect

不是公认的

Route

组件道具。请参阅类型声明。

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: RouteObject[];
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}