React) 리액트 라우터 사용하기

라우팅이란?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다.

 

React Router

리액트안에서 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있도록 하는 라이브러리

 

프로젝트에 라우터 적용

"npm install react-router-dom" 명령어로 라이브러리 설치

route폴더안에 Home과 Detail js파일을 만들고 <Route> 컴포넌트를 통해 라우트를 설정해준다.

import {BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./route/Home";
import Detail from "./route/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/movie/:id" element={<Detail/>} />
        <Route path="/" element ={<Home />} />
      </Routes>
     </BrowserRouter>
  );
}

export default App;

 

1. <Route> 컴포넌트는 다음과 같이 사용한다.

<Route paht="주소규칙" element={보여줄 컴포넌트} />

 

2. <Rotue> 컴포넌트는 <Routes> 컴포넌트 내부에서 사용되어야 한다.

 

 

 

출처 : https://velog.io/@velopert/react-router-v6-tutorial