React-router route.lazy

pudek357 · Aug 15, 2024 · 37ee080 · 37ee080
1 parent 21afeab
commit 37ee080
Show file tree

Hide file tree

Showing 11 changed files with 312 additions and 8 deletions.
diff --git a/.github/workflows/deploy.yml b/.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
diff --git a/dist/assets/Bar-a2943911.js b/dist/assets/Bar-a2943911.js
@@ -0,0 +1 @@
+import{j as r}from"./index-7e6ee8dc.js";const n=()=>r("div",{children:"Bar"});export{n as Component};
diff --git a/dist/assets/Foo-f4586d09.js b/dist/assets/Foo-f4586d09.js
@@ -0,0 +1 @@
+import{j as o}from"./index-7e6ee8dc.js";const n=()=>o("div",{children:"Foo"});export{n as Component};
diff --git a/dist/assets/Root-4b3afa67.js b/dist/assets/Root-4b3afa67.js
@@ -0,0 +1 @@
+import{j as o}from"./index-7e6ee8dc.js";const t=()=>o("div",{children:"Root"});export{t as Component};
diff --git a/dist/assets/index-7e6ee8dc.js b/dist/assets/index-7e6ee8dc.js
diff --git a/dist/assets/index-b5fedda1.css b/dist/assets/index-b5fedda1.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Router - Basic Data Router Example</title>
+    <script type="module" crossorigin src="/assets/index-7e6ee8dc.js"></script>
+    <link rel="stylesheet" href="/assets/index-b5fedda1.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/package.json b/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": {

diff --git a/src/RootLayout.tsx b/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>
 

diff --git a/src/app.tsx b/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/"),
+      },
     ],
   },
 ]);

diff --git a/vite.config.ts b/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,
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{j as r}from"./index-7e6ee8dc.js";const n=()=>r("div",{children:"Bar"});export{n as Component};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{j as o}from"./index-7e6ee8dc.js";const n=()=>o("div",{children:"Foo"});export{n as Component};