routing for tutorial

Author: tknkaa

apps/web/package.json

@@ -10,7 +10,6 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"shared": "workspace:*",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@mui/base": "^5.0.0-beta.58",
@@ -21,7 +20,9 @@
 		"react-dom": "^19.1.1",
 		"react-icons": "^5.3.0",
 		"react-markdown": "^9.0.1",
-		"react-router-dom": "^6.26.2"
+		"react-router": "^7.8.2",
+		"react-router-dom": "^7.8.2",
+		"shared": "workspace:*"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.33.0",

apps/web/src/App.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
+import { Route, Routes } from "react-router";
 import NotFound from "./pages/NotFound/NotFound";
 import GameInterface from "./pages/Play/GameInterface";
 import Result from "./pages/Result/Result";
 import Start from "./pages/Start/Start";
-import Tutorial from "./pages/Tutorial/Tutorial";
-import "./App.css";
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import BasicRules from "./pages/Tutorial/BasicRules";
 import LocalRules from "./pages/Tutorial/LocalRules";
+import Tutorial from "./pages/Tutorial/Tutorial";
+import "./App.css";
 
 export type PlayerInfo = {
 	rank: number | null;
@@ -33,27 +33,25 @@ function App() {
 				fontFamily: "YuMincho, Hiragino Mincho ProN, serif",
 			}}
 		>
-			<Router>
-				<Routes>
-					<Route path="/" element={<Start setPlayerInfo={setPlayerInfo} />} />
-					<Route path="/tutorial" element={<Tutorial />}>
-						<Route index element={<BasicRules />} />
-						<Route path="basic" element={<BasicRules />} />
-						<Route path="local" element={<LocalRules />} />
-					</Route>
-					<Route
-						path="/play"
-						element={
-							<GameInterface
-								playerInfo={playerInfo}
-								setPlayerInfo={setPlayerInfo}
-							/>
-						}
-					/>
-					<Route path="/result" element={<Result playerInfo={playerInfo} />} />
-					<Route path="*" element={<NotFound />} />
-				</Routes>
-			</Router>
+			<Routes>
+				<Route index element={<Start setPlayerInfo={setPlayerInfo} />} />
+				<Route path="tutorial" element={<Tutorial />}>
+					<Route index element={<BasicRules />} />
+					<Route path="basic" element={<BasicRules />} />
+					<Route path="local" element={<LocalRules />} />
+				</Route>
+				<Route
+					path="play"
+					element={
+						<GameInterface
+							playerInfo={playerInfo}
+							setPlayerInfo={setPlayerInfo}
+						/>
+					}
+				/>
+				<Route path="result" element={<Result playerInfo={playerInfo} />} />
+				<Route path="*" element={<NotFound />} />
+			</Routes>
 		</div>
 	);
 }

apps/web/src/index.css

@@ -22,6 +22,7 @@ a {
 	color: #646cff;
 	text-decoration: inherit;
 }
+
 a:hover {
 	color: #535bf2;
 }
@@ -54,9 +55,11 @@ button {
 	cursor: pointer;
 	transition: border-color 0.25s;
 }
+
 button:hover {
 	border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
@@ -68,10 +71,8 @@ button:focus-visible {
 		color: #213547;
 		background-color: #ffffff;
 	}
+
 	a:hover {
 		color: #747bff;
 	}
-	button {
-		background-color: #f9f9f9;
-	}
 }

apps/web/src/main.tsx

@@ -1,10 +1,19 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
 import App from "./App.tsx";
 import "./index.css";
 
-createRoot(document.getElementById("root"))?.render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+	const root = createRoot(rootElement);
+
+	root.render(
+		<StrictMode>
+			<BrowserRouter>
+				<App />
+			</BrowserRouter>
+		</StrictMode>,
+	);
+}

apps/web/src/pages/Start/Start.tsx

@@ -68,15 +68,15 @@ export default function Start(props: StartProps) {
 
 				<button
 					onClick={handleUserNameSubmit}
-					className="w-115 h-17.5 bg-[#fd903c] text-white text-xl rounded-md my-3.5"
+					className="w-115 h-17.5 bg-black text-white text-xl rounded-md my-3.5"
 					type="button"
 				>
 					プレイ
 				</button>
 				<div className="flex gap-5">
 					<button
 						onClick={() => navigate("/tutorial")}
-						className="w-55 bg-[#85a4ba] text-white rounded-md"
+						className="w-55 bg-black text-white rounded-md"
 						type="button"
 					>
 						遊び方
@@ -90,7 +90,7 @@ export default function Start(props: StartProps) {
 							});
 							navigate("/result");
 						}}
-						className="w-55 bg-[#85a4ba] text-white rounded-md"
+						className="w-55 bg-black text-white rounded-md"
 						type="button"
 					>
 						ランキング

apps/web/src/pages/Tutorial/Tutorial.tsx

@@ -1,6 +1,6 @@
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import IconButton from "@mui/material/IconButton";
-import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
+import { Link, Outlet, useNavigate, useParams } from "react-router";
 
 type ContentIdType = "basic" | "local";