[Web] Route 사용법(react-router-dom) 및 페이지 설정

Route 사용법(react-router-dom) 및 페이지 설정

 

1. 설치방법

터미널 창에서 아래 명령어 입력

npm install react-router-dom@6

 

2. 환경 설정

index.js 파일에서 아래처럼 App을 BrowserRouter로 감싸주시면 됩니다.

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

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

 

3. 라우터(Router)로 페이지 설정

App.js 파일에서 import 후 페이지 설정을 하면 됩니다.

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/home" element={ <div>Home</div> } />
      <Route path="/detail" element={ <div>Detail</div> } />
    </Routes>
  )
}