리엑트는 spa(single page application)이라 하나의 html파일만을 사용한다고 알고있다.

그래서 사용자가 각각의 다른 페이지들을 요청하게 되면 내부의 <div>를 갈아치워 보여주면 됨(컴포넌트사용, 모듈화)

외부 라이브러리인 react-router-dom을 설치해 구현해보겠음.

react-router-dom 설치

터미널에서 npm install react-router-dom@6을 입력해 설치

셋팅은 index.js파일로 가서

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

▲ import 후 <BrowserRouter>를 <App/>으로 감싸면 끝!

router로 페이지 나누는 법

url경로를 잘 살펴보면
qwer8851.com/어쩌구로 접속하면 A페이지를 보여주고,
qwer8851.com/저쩌구로 접속하면 B페이지를 보여줌.

이런식으로 url경로마다 다른 페이지를 보여주고싶으면 아래처럼 작성함 될 듯

 (App.js)

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

1. 우선 상단에 여러 컴포넌트를 import해옴(routes, route, linke)
2. <Routes>를 만들고 그 안에 <Route>를 작성
3. <Route path="/url경로" element={<보여줄html>} /> 작성

이제 페이지를 2개 만들었음.
url뒤에 /about 입력해보고 /detail도 입력해보며 테스트해보면 될 듯

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } /> 

▲ 메인페이지 경로
Q. 메인페이지 접속 시 상품목록 보여주고 싶음.
A. element={}안에 상품목록 레이아웃을 넣으면 될 듯

<Route path="/" element={ 
  <>
   <div className="main-bg"></div>
   <div className="container">
     <div className="row">
       { shoes.map((a, i)=>{
         return <Card shoes={shoes[i]} i={i} ></Card>
        })}
      </div>
    </div> 
  </>
} /> 

이러면 메인페이지 접속시에만 상품목록이 보이게 되고,
나머지 /detail그리고 /about 페이지에선 안보이게 됨.

페이지 이동 버튼

사용자가 주소창에 url을 입력해서 들어가는 경우는 거의 없음(링크타고 들어옴)

링크를 만들고 싶으면 react-router-dom에서 Link컴포넌트 import(위에서처럼)해오고 원하는데에 <Link>쓰면 될 듯

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

이렇게 해주면 각각 url 경로로 이동하는 링크를 생성할 수 있음