👗사이트 바로가기>>https://zara-react.netlify.app

1. 라우터 세팅

1. npm install react-router-dom 라우터 설치
2. index.js에서 import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter> // -> 이렇게 감싸줌
    <App />
  </BrowserRouter>
);

1. App.js 에서 Routes 세팅(페이지를 바꿔주는 역할)

import { Route, Routes } from "react-router-dom";

const App = () => {
  return (
    <div>
      <Routes>
      <Route path="" element={}/> //페이지 3개라서 Route 3개임
      <Route path="" element={}/>
      <Route path="" element={}/>
      </Routes>
    </div>
  );
};

export default App;

1. path를 설정한다

import React from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Login from "./page/Login";
import ProductAll from "./page/ProductAll";
import ProductDetail from "./page/ProductDetail";

const App = () => {
  return (
    <div>
      <Routes>
      <Route path="/" element={<ProductAll />}/>
      <Route path="/login" element={<Login />}/>
      <Route path="/product/:id" element={<ProductDetail />}/>
      </Routes>
    </div>
  );
};

export default App;

1. Navbar는 계속 고정이니까 Routes 바깥에 만들어줌
2. map()

<div>
 {menuList.map((item, index) => (
   <li key={index}>{item}</li>
     ))}
 </div>

• 검색창 css 코드

.searchArea {
  border-bottom: 2px solid black;
  position: absolute;
  right: 50px;
}

.searchArea input {
  border: none;
  margin: 5px;
}

.searchArea input:focus {
  outline: none;
}