React Router dom 対応

EnvにRouterDomのBasenameとViteのBaseを共用させるのが一番クレバーよね
visionary-japan · Dec 7, 2023 · 73cc05c · 73cc05c
1 parent 3a8f634
commit 73cc05c
Show file tree

Hide file tree

Showing 14 changed files with 168 additions and 67 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_BASE_PATH=react_ui_comparison
diff --git a/docs/assets/index-1YU9HeGx.css b/docs/assets/index-1YU9HeGx.css
diff --git a/docs/assets/index-5XX8vc5f.js b/docs/assets/index-5XX8vc5f.js
diff --git a/docs/assets/index-_nXaMcom.js b/docs/assets/index-_nXaMcom.js
diff --git a/docs/assets/index-yVuTKVQ2.css b/docs/assets/index-yVuTKVQ2.css
diff --git a/docs/index.html b/docs/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/react_dnd_detectionCompare/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/react_dnd_detectionCompare/assets/index-5XX8vc5f.js"></script>
-    <link rel="stylesheet" crossorigin href="/react_dnd_detectionCompare/assets/index-yVuTKVQ2.css">
+    <script type="module" crossorigin src="/assets/index-_nXaMcom.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-1YU9HeGx.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
+        "react-router-dom": "^6.20.1",
         "typescript": "^5.2.2",
         "vite": "^5.0.0"
     }

diff --git a/src/Defaults.css b/src/Defaults.css
@@ -69,7 +69,7 @@ button {
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
-  color: #ffffff;
+  color: #646cff;
 }
 button:hover {
   border-color: #646cff;
@@ -78,16 +78,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/Drag.css b/src/Drag.css
@@ -62,8 +62,8 @@
   left: 300px;
   top: 300px;
   /* サイズ */
-  width: 300px;
-  height: 300px;
+  width: 100px;
+  height: 100px;
 }
 #percent::after {
   content: '';

diff --git a/src/Index.tsx b/src/Index.tsx
@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+import './App.css';
+
+export function Index() {
+    return (
+        <div>
+            <h1>React UI Comparison</h1>
+            <img src='' alt='' />
+            <nav>
+                <ul>
+                    <li>
+                        <Link to='/'>Index</Link>
+                    </li>
+                    <ul>
+                        <li>
+                            <Link to='/dnd'>Drag & Drop</Link>
+                        </li>
+                    </ul>
+                </ul>
+            </nav>
+        </div>
+    );
+}
diff --git a/src/index.css → src/main.css b/src/index.css → src/main.css
@@ -39,3 +39,16 @@ img {
   margin: 0 auto;
   text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import reactDom from 'react-dom/client';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { App } from './App.tsx';
-import './index.css';
+import { Index } from './Index.tsx';
+import './main.css';
 
 reactDom.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
-        <App />
+        <BrowserRouter basename={import.meta.env.VITE_BASE_PATH}>
+            <Routes>
+                <Route path='/' element={<Index />} />
+                <Route path='dnd' element={<App />} />
+            </Routes>
+        </BrowserRouter>
     </React.StrictMode>,
 );
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,5 +5,5 @@ import { defineConfig } from 'vite';
 // biome-ignore lint/nursery/noDefaultExport: <explanation>
 export default defineConfig({
     plugins: [react()],
-    base: 'react_dnd_detectionCompare',
+    base: process.env.VITE_BASE_PATH,
 });