React-router route.lazy

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 .DS_Store
-# dist
+dist
 dist-ssr
 *.local

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && mv dist docs",
+    "build": "tsc && vite build",
     "serve": "vite preview"
   },
   "dependencies": {

src/RootLayout.tsx

@@ -10,13 +10,13 @@ export const RootLayout = () => {
       <div className="main-content">
         <div className="sidebar">
           <div>
-            <Link to="/">root</Link>
+            <Link to="/react-router-route-lazy/">root</Link>
           </div>
           <div>
-            <Link to="/foo">foo</Link>
+            <Link to="/react-router-route-lazy/foo">foo</Link>
           </div>
           <div>
-            <Link to="/bar">bar</Link>
+            <Link to="/react-router-route-lazy/bar">bar</Link>
           </div>
         </div>
 

src/app.tsx

@@ -1,4 +1,8 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  createBrowserRouter,
+  redirect,
+  RouterProvider,
+} from "react-router-dom";
 import { RootLayout } from "./RootLayout";
 import "./index.css";
 
@@ -7,17 +11,21 @@ let router = createBrowserRouter([
     element: <RootLayout />,
     children: [
       {
-        path: "/",
+        path: "/react-router-route-lazy/",
         lazy: () => import("./Root"),
       },
       {
-        path: "/foo",
+        path: "/react-router-route-lazy/foo",
         lazy: () => import("./Foo"),
       },
       {
-        path: "/bar",
+        path: "/react-router-route-lazy/bar",
         lazy: () => import("./Bar"),
       },
+      {
+        path: "*",
+        loader: () => redirect("/react-router-route-lazy/"),
+      },
     ],
   },
 ]);

vite.config.ts

@@ -5,6 +5,7 @@ import rollupReplace from "@rollup/plugin-replace";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "/react-router-route-lazy/",
   server: {
     port: 3000,
   },