From a340f0e5b3eda5b1a2e8df1b2aff16b2649fd4ec Mon Sep 17 00:00:00 2001
From: fdhhhdjd <nguyentientai10@gmail.com>
Date: Thu, 21 Sep 2023 14:03:59 +0700
Subject: [PATCH] #31 [ Router ] React Router

---
 src/routers/2.Dynamic Routes/About.js  | 11 ++++++++++
 src/routers/2.Dynamic Routes/Detail.js | 13 +++++++++++
 src/routers/2.Dynamic Routes/Home.js   | 11 ++++++++++
 src/routers/Main.js                    | 30 +++++++++++++++++++++++++-
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/routers/2.Dynamic Routes/About.js
 create mode 100644 src/routers/2.Dynamic Routes/Detail.js
 create mode 100644 src/routers/2.Dynamic Routes/Home.js

diff --git a/src/routers/2.Dynamic Routes/About.js b/src/routers/2.Dynamic Routes/About.js
new file mode 100644
index 0000000..5a04315
--- /dev/null
+++ b/src/routers/2.Dynamic Routes/About.js	
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <>
+      <h2>About</h2>
+    </>
+  );
+};
+
+export default About;
diff --git a/src/routers/2.Dynamic Routes/Detail.js b/src/routers/2.Dynamic Routes/Detail.js
new file mode 100644
index 0000000..e9e828a
--- /dev/null
+++ b/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;
diff --git a/src/routers/2.Dynamic Routes/Home.js b/src/routers/2.Dynamic Routes/Home.js
new file mode 100644
index 0000000..1294ea2
--- /dev/null
+++ b/src/routers/2.Dynamic Routes/Home.js	
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <>
+      <h2>Home</h2>
+    </>
+  );
+};
+
+export default Home;
diff --git a/src/routers/Main.js b/src/routers/Main.js
index 4feb77c..3bdb37a 100644
--- a/src/routers/Main.js
+++ b/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>
     </>
   );
 };