在 github 页面中使用带有 SPA 的 Tanstack 路由器

Question

我正在使用react + tanstack路由器+ github页面。

这是页面，

https://jbetoreyes.github.io/beyond-brand-boosters

当我通过导航进入“关于我们”页面时，页面加载正常，但如果我直接进入

https://jbetoreyes.github.io/beyond-brand-boosters/about-us

我收到了 404。

在react-router中有哈希路由器，我查看了文档但没有找到

这就是我的代码的样子

https://github.com/JBetoReyes/beyond-brand-boosters/blob/master/src/Router.ts

Answer 1

是的，您需要使用基于哈希的路由，该路由已记录在here。

默认的“浏览器”路由将展示您在 Github 页面上托管它的上下文中描述的行为，因为 Github 只能提供静态文件，并且无法解析回您的

index.html

的任意路径。

使用哈希路由，URL 的路径部分始终一致，而哈希部分则用于反应应用程序内的位置。

改变：

export const router = new Router({ routeTree })

至

import { Router, Route, RootRoute, createMemoryHistory } from '@tanstack/react-router';

// Existing code...

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'],
})

export const router = new Router({ routeTree, history: memoryHistory })