router(라우터 사용법)

설치

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/>을 감싼다.

 

Routes 사용

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

function App(){
   return (
   //...
   <Routes>
      <Route path="/" element{ <div>메인 페이지</div> } />
      <Route path="/page1" element={ <div>페이지1</div> } />
      <Route path="/page2" element={ <div>페이지2</div> } />
   </Routes>
   )
}

우선 상단에 컴포넌트를 import하고 <Routes>를 만든 다음 그 안에 <Route>를 작성한다.

<Route path="/url 경로" element={<표시될 html>} />로 라우터를 만든다. 메인 페이지는 path="/" 을 이용한다.

 

404페이지

<Route path="*" element={ <div>404페이지</div> } />

* 는 모든 경로라는 뜻으로 만들어 둔 페이지가 아닌 페이지에 접속시 404페이지를 보여준다.

 

라우터를 쓰면 동적인 UI를 만들 수 있다.