From ae4cc406749585fdf89cfc9ad570974e3a25b2df Mon Sep 17 00:00:00 2001
From: fdhhhdjd <nguyentientai10@gmail.com>
Date: Sat, 23 Sep 2023 14:05:22 +0700
Subject: [PATCH] #31 [ Router ] React Router

---
 .../4.Nested Routes/layouts/BookLayout.js     | 22 +++++++++++++++++--
 src/routers/9.Search Parameters/index.js      |  7 ++++++
 src/routers/Main.js                           |  2 ++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/routers/9.Search Parameters/index.js

diff --git a/src/routers/4.Nested Routes/layouts/BookLayout.js b/src/routers/4.Nested Routes/layouts/BookLayout.js
index 8d768e2..ab58bac 100644
--- a/src/routers/4.Nested Routes/layouts/BookLayout.js	
+++ b/src/routers/4.Nested Routes/layouts/BookLayout.js	
@@ -1,22 +1,40 @@
 //* REACT
-import React from 'react';
+import React, { useState } from 'react';
 
 //* LIBRARY
-import { Link, Outlet } from 'react-router-dom';
+import { Link, Outlet, useSearchParams } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
 
 const BookLayout = () => {
+  // const [number, setNumber] = useState(3);
+  const [searchNumber, setSearchNumber] = useSearchParams({ n: 3 });
+  const number = searchNumber.get('n');
   return (
     <>
       <ul>
         <li>
           <Link to={`/book/${uuid()}`}>Book Detail</Link>
         </li>
+        <li>
+          <Link to={`/book/${number}`}>Book {number}</Link>
+        </li>
         <li>
           <Link to="/book/new">Book New</Link>
         </li>
       </ul>
       <Outlet context={{ hello: 'Tai Heo FA' }} />
+
+      {/* Search Parameters  */}
+
+      {/* Step1 */}
+      {/* <input type="number" value={number} onChange={(e) => setNumber(e.target.value)} /> */}
+
+      {/* Step2 */}
+      <input
+        type="number"
+        value={number}
+        onChange={(e) => setSearchNumber({ n: e.target.value })}
+      />
     </>
   );
 };
diff --git a/src/routers/9.Search Parameters/index.js b/src/routers/9.Search Parameters/index.js
new file mode 100644
index 0000000..68c83f3
--- /dev/null
+++ b/src/routers/9.Search Parameters/index.js	
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Learn_9 = () => {
+  return <div>index</div>;
+};
+
+export default Learn_9;
diff --git a/src/routers/Main.js b/src/routers/Main.js
index 5c5b8e3..7825ec8 100644
--- a/src/routers/Main.js
+++ b/src/routers/Main.js
@@ -17,6 +17,7 @@ import { BookRoutes } from './4.Nested Routes/routes/BookRoute';
 import LinkComponent from './6. Link Component';
 import NavLinkComponent from './7.NavLink Component';
 import NavigateLearn8 from './8.useNavigate Hook';
+import Learn_9 from './9.Search Parameters';
 
 const Main = () => {
   return (
@@ -44,6 +45,7 @@ const Main = () => {
             <Route path="/about" element={<About />} />
             <Route path="/detail/:id" element={<Detail />} />
             <Route path="/navigate" element={<NavigateLearn8 />} />
+            <Route path="/search" element={<Learn_9 />} />
 
             {/* Step 1 --- Nested Routes */}
             {/* <Route path="/book">