React Router-셋팅과 기본 라우팅

페이지를 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지이지만 React는 html 파일을 하나만 사용한다.(SPA) 그래서 react에서는 누가 다른 페이지 요청하면 그냥 내부에 있는 <div> 갈아치워서 보여주면 된다.

React-Router-dom 설치

• 외부 라이브러리이기 때문에 react-router-dom 홈페이지 들어가서 그대로 따라해야됨

npm install react-router-dom@6

• 터미널 열어서 입력하고 설치

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

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

• 셋팅은 index.js <BrowserRouter > 이걸로 <App/> 감싸면 된다.

라우터로 페이지 나누는 법

 (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>
  )
}

• 상단에 여러가지 컴포넌트를 import
• <Routes> 만들고 그 안에 <Route>를 작성
• <Route path="/url경로" element={<보여줄 html>} /> 이렇게 작성하면 된다.

<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> 
  </>
} />

• 이 url 경로는 메인 페이지
• 이러면 메인페이지 접속 시에만 상품목록이 보이고 나머지 페이지에서는 보이지 않음

Link : 페이지 이동 버튼

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

 

• 각각 url 경로로 이동하는 링크를 생성