From 8fe925363f3cf903942c3f225a4cab69a8108216 Mon Sep 17 00:00:00 2001 From: Liangdi Date: Mon, 23 Dec 2024 23:07:33 +1100 Subject: [PATCH] fix: implement hash-based routing for GitHub Pages - Replace memory history with hash history to handle direct URL navigation - Prevents 404 errors when accessing routes directly - URLs will now use hash-based format (e.g., /#/about) - https://tanstack.com/router/v1/docs/framework/react/guide/history-types#hash-routing - https://stackoverflow.com/questions/77466065/using-tanstack-router-with-a-spa-in-github-pages --- src/main.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index c5dbbac..cd65946 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,16 +1,20 @@ import { StrictMode } from 'react' import ReactDOM from 'react-dom/client' import './index.css' -import { RouterProvider, createRouter } from '@tanstack/react-router' +import { RouterProvider, createRouter, createHashHistory } from '@tanstack/react-router' import { ThemeProvider } from "@/components/theme/theme-provider" // Import the generated route tree import { routeTree } from './routeTree.gen' +// Create a hash history +const hashHistory = createHashHistory() + // Create a new router instance const router = createRouter({ routeTree, basepath: "/monash-grades-calculator/", + history: hashHistory, }) // Register the router instance for type safety