react 라우터 (기본 라우팅)

라우터로 페이지 나누는 법

url 경로마다 다른 페이지를 보여주고 싶으면 라우터를 사용한다.

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

1. 우선 상단에서 여러가지 컴포넌트를 import 해오고,

2. <Routes> 만들고 그 안에 <Route>를 작성한다.

3. <Route path="/url경로" element={ <보여줄html> } /> 이렇게 작성하면 된다.

++) element안에 div가 여러 개일 경우 하나의 div 혹언 <>로 묶여 있어야 한다!

페이지 이동 버튼

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

이러면 각각 url 경로로 이동하는 링크를 생성할 수 있다.