use hash router

README.md

@@ -1,5 +1,9 @@
 # smoothstep
 
+[view animations at matthen.github.io/smoothstep](https://matthen.github.io/smoothstep/).
+
+Animations are built automatically using github actions: [![deploy-pages](https://github.com/matthen/smoothstep/actions/workflows/deploy-pages.yaml/badge.svg?branch=main)](https://github.com/matthen/smoothstep/actions/workflows/deploy-pages.yaml).
+
 A collection of mathematical animations, written as small React components.
 
 -   [animations](src/animations) - code for each animation

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Link, RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Link, RouterProvider, createHashRouter } from 'react-router-dom';
 
 import Hypocycloids from './animations/hypocycloids';
 import './index.css';
@@ -30,21 +30,18 @@ const AnimationList = () => {
     );
 };
 
-const router = createBrowserRouter(
-    [
-        {
-            path: '/',
-            element: <AnimationList />,
-        },
-        ...animations.map((animation) => {
-            return {
-                path: `/${animation.name}`,
-                element: <animation.component />,
-            };
-        }),
-    ],
-    { basename: '/smoothstep' },
-);
+const router = createHashRouter([
+    {
+        path: '/',
+        element: <AnimationList />,
+    },
+    ...animations.map((animation) => {
+        return {
+            path: `/${animation.name}`,
+            element: <animation.component />,
+        };
+    }),
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(