ajout router

package.json

@@ -29,6 +29,7 @@
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.5",
+    "react-router-dom": "^7.1.5",
     "sass": "^1.83.4",
     "vite": "^4.4.9"
   }

src/app.jsx

@@ -1,15 +1,23 @@
+import { Route, Routes } from 'react-router-dom';
+
 import './app.scss';
 import Favorites from './components/favorites';
+import Footer from './components/footer';
+import Home from './components/home';
 import NavBar from './components/navbar';
 import ProfilePage from './pages/profile-page';
 
 function App() {
   return (
-    <div>
-      <NavBar />
-      <Favorites />
-      <ProfilePage />
-    </div>
+    <Routes>
+      <Route element={<NavBar />}>
+        <Route element={<Footer />}>
+          <Route path='/' element={<Home />} />
+          <Route path='/favorites' element={<Favorites />} />
+          <Route path='/profilePage' element={<ProfilePage />} />
+        </Route>
+      </Route>
+    </Routes>
   );
 }
 

src/components/footer.jsx

@@ -1,31 +1,39 @@
+import { Outlet } from 'react-router-dom';
+
 import '../style/footer.scss';
 import Socials from './socials.jsx';
 
 function Footer() {
   return (
-    <div className='footer'>
-      <img src='/marvel-logo.png' alt='marvel-logo' />
-      <div className='footer-nav'>
-        <div>
-          <a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
-            Shops
-          </a>
-          <a href='https://www.disneyplus.com/brand/marvel?cid=DTCI-Synergy-Marvel-Site-Acquisition-Library-US-Marvel-NA-EN-NavFooter-Marvel_DisneyPlus_NavFooter_Evergreen-NA'>
-            Disney+
-          </a>
-        </div>
+    <>
+      <Outlet />
+
+      <footer>
+        <div className='footer'>
+          <img src='/marvel-logo.png' alt='marvel-logo' />
+          <div className='footer-nav'>
+            <div>
+              <a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
+                Shops
+              </a>
+              <a href='https://www.disneyplus.com/brand/marvel?cid=DTCI-Synergy-Marvel-Site-Acquisition-Library-US-Marvel-NA-EN-NavFooter-Marvel_DisneyPlus_NavFooter_Evergreen-NA'>
+                Disney+
+              </a>
+            </div>
 
-        <div>
-          <a href='https://marvelstory.fr/'>Blog</a>
-          <a href='https://www.marvelhq.com/'>Marvel.com</a>
-        </div>
-        <div>
-          <a href='https://www.marvel.com/corporate/advertising'>Advertising</a>
-          <a href='https://help.marvel.com/'>Help/Faq</a>
-        </div>
-      </div>
-      <Socials />
-    </div>
+            <div>
+              <a href='https://marvelstory.fr/'>Blog</a>
+              <a href='https://www.marvelhq.com/'>Marvel.com</a>
+            </div>
+            <div>
+              <a href='https://www.marvel.com/corporate/advertising'>Advertising</a>
+              <a href='https://help.marvel.com/'>Help/Faq</a>
+            </div>
+          </div>
+          <Socials />
+        </div>{' '}
+      </footer>
+    </>
   );
 }
 

src/components/home.jsx

@@ -0,0 +1,5 @@
+const Home = () => {
+  return <h1>Home</h1>;
+};
+
+export default Home;

src/components/navbar.jsx

@@ -1,28 +1,42 @@
 import { useState } from 'react';
+import { Link, Outlet } from 'react-router-dom';
 
 import '../style/navbar.scss';
 
 function Navbar() {
   const [input, setInput] = useState('');
 
   return (
-    <nav>
-      <ul>
-        <li>
-          {' '}
-          <img src='/home.png' alt='' /> Home
-        </li>
+    <>
+      <header>
+        <nav>
+          <ul>
+            <li>
+              {' '}
+              <Link to='/' className='myLink'>
+                <img src='/home.png' alt='' /> Home
+              </Link>
+            </li>
 
-        <li className='input-wrapper'>
-          <img src='/search.png' alt='' />
-          <input type='text' placeholder='Search' value={input} onChange={(e) => setInput(e.target.value)} />
-        </li>
-        <li>
-          <img src='/heart.png' alt='' />
-          Favorites
-        </li>
-      </ul>
-    </nav>
+            <li className='input-wrapper'>
+              <img src='/search.png' alt='' />
+              <input type='text' placeholder='Search' value={input} onChange={(e) => setInput(e.target.value)} />
+            </li>
+            <li>
+              <Link to='/favorites' className='myLink'>
+                {' '}
+                <img src='/heart.png' alt='' />
+                Favorites
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+
+        <Outlet />
+
+    </>
   );
 }
 

src/main.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
-import App from './app';
+import App from './app.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );

src/style/footer.scss

@@ -4,6 +4,7 @@
   width: 100%;
   height: 100%;
   background-color: #670208;
+  margin-top: 30px;
 }
 
 .footer > img {

src/style/navbar.scss

@@ -11,18 +11,23 @@ nav {
     align-items: center;
     padding: 20px;
 
+    .myLink {
+      color: white;
+      text-decoration: none;
+      display: flex;
+    }
     img {
       width: 23px;
       height: 23px;
-      margin-bottom: 04px;
+      margin-bottom: 05px;
       padding-right: 1px;
     }
 
     li {
       display: flex;
       align-items: center;
       /* padding:20 ; */
-      font-size: 20px;
+      font-size: 22px;
       color: white;
       /* padding-left: 10%; */
       font-family: 'Aclonica', sans-serif;