코알누-react hnm 쇼핑몰 웹사이트 만들기 - 라우터 세팅

//1. 전체상품 페이지, 로그인, 상품상세페이지(리액트 라우터)
//2. 전체 상품페이지에서는 전체 상품을 볼수 있다.
//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.
//4. 상품디테일을 눌렀으나, 로그인이 안되있을경우에는 로그인페이지가 먼저 나온다.
//5. 로그인이 되어있을 경우에는 상품 디테일 페이지를 볼수 있다.
//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.
//7. 로그아웃이 되면 상품 디테일페이지를 볼수없다, 다시 로그인 페이지가 보인다.
//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.
//9. 상품을 검색할수 있다.

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

 </BrowserRouter>

</BrowserRouter>는 React에서 라우팅을 구현하는 데 사용되는 컴포넌트인 BrowserRouter 컴포넌트의 닫는 태그를 나타냅니다.

 

npm install react-router-dom@6 

 

function App() {
  return (
    <div>
      <Routes>
     <Route path="/" element={<ProductAll/>}/>
     <Route path="/login" element={<Login/>}/>
     <Route path="/product/:id" element={<ProductDetail/>}/>
      </Routes>
    </div>
  );
}
// Routes가 스위치 역할

ProductDetail로 가는 경로를 id로 설정해놓았다.