#31 [ Router ] React Router

src/routers/2.Dynamic Routes/About.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <>
+      <h2>About</h2>
+    </>
+  );
+};
+
+export default About;

src/routers/2.Dynamic Routes/Detail.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const Detail = () => {
+  const { id } = useParams();
+  return (
+    <>
+      <h2>Detail --- {id}</h2>
+    </>
+  );
+};
+
+export default Detail;

src/routers/2.Dynamic Routes/Home.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <>
+      <h2>Home</h2>
+    </>
+  );
+};
+
+export default Home;

src/routers/Main.js

@@ -1,9 +1,37 @@
+//* REACT
 import React from 'react';
 
+//* LIBRARY
+import { Link, Route, Routes } from 'react-router-dom';
+
+import Home from './2.Dynamic Routes/Home';
+import About from './2.Dynamic Routes/About';
+import Detail from './2.Dynamic Routes/Detail';
+
 const Main = () => {
   return (
     <>
-      <h1>Main</h1>
+      {/* ------- */}
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+        </ul>
+      </nav>
+      {/* ------- */}
+      <React.Fragment>
+        <div className="App">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/detail/:id" element={<Detail />} />
+          </Routes>
+        </div>
+      </React.Fragment>
     </>
   );
 };