React Router でトップページと会員登録ページにアクセスできるようにする

7 files changed, 40 insertions, 75 deletions

diff --git a/src/SignUp.css b/src/SignUp.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/SignUp.css
diff --git a/src/SignUp.tsx b/src/SignUp.tsx
index 58309a6..d812b35 100644
--- a/src/SignUp.tsx
+++ b/src/SignUp.tsx
@@ -1,13 +1,10 @@
+import './SignUp.css'
+
 export const SignUp = () => {
   return (
-    <div>
-      <p>hello, World</p>
-    </div>
+    <>
+      <h1>会員登録</h1>
+    </>
   );
 }
 
-
-
-
-
-
diff --git a/src/Top.css b/src/Top.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/Top.css
diff --git a/src/Top.tsx b/src/Top.tsx
new file mode 100644
index 0000000..7907ed5
--- /dev/null
+++ b/src/Top.tsx
@@ -0,0 +1,13 @@
+import './Top.css'
+
+export const Top = () => {
+  return (
+    <>
+      <h1>トップページ</h1>
+      <ul>
+        <li><a href='./sign-up'>会員登録</a></li>
+      </ul>
+    </>
+  );
+}
+
diff --git a/src/index.css b/src/index.css
index 80b6306..ec6bd65 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,64 +1,6 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
+.mainWrap {
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-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;
-  }
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
diff --git a/src/main.tsx b/src/main.tsx
index cabfbb3..27887aa 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,15 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { App } from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { RouterProvider } from 'react-router-dom';
+import { routes } from './routes.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <div className="mainWrap">
+      <div className="main">
+        <RouterProvider router={routes} />
+      </div>
+    </div>
   </React.StrictMode>,
 )
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..8cac244
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,8 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { Top } from './Top.tsx';
+import { SignUp } from './SignUp.tsx';
+
+export const routes = createBrowserRouter([
+  { path: '/', element: <Top /> },
+  { path: '/sign-up', element: <SignUp /> }
+]);