#31 [ Router ] React Router

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 })}
+      />
     </>
   );
 };

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;

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">