[React] React Router 쓰는 법 react-router-dom

• React는 SPA(Single Page Application)이므로 html 파일을 하나만 사용한다.
• React Router를 사용하면 페이지 간의 전환 및 라우팅을 쉽게 처리 할 수 있다.
• 주로 외부 라이브러리인 react-router-dom를 사용한다.

사용법

npm install react-router-dom@6

-> 먼저, 터미널에 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 파일로 가서 import 후 <App /> 컴포넌트를  <BrowserRouter> 컴포넌트로 감싼다.

 

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


      <Routes>
        <Route path='/detail' element={<div>디테일페이지</div>}/>
      </Routes>

-> App.js 파일에서 위 코드를 작성한다.

-> path="/url경로" 로 가면 element={ <보여줄html> } 라는 뜻이다.

 

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

-> 페이지 이동은 import 해온 Link 컴포넌트를 이용한다.

-> 홈 글씨를 클릭하면 "/"로 이동한다는 뜻이다.