[React] 리액트 라우터 페이지 나누기 - 리액트 라우팅

 

 

● 라우터란?

- React-Router는 각각 다른 HTML을 보여주는게 아니라 내부를 완전히 교체해 다른 페이지처럼 보이는 것

 

 

● 리액트 라우터 페이지 분할 방법

- <Route path=””>로 페이지를 분할

 

 

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

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

 

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

<Routes>
     <Route/>
     <Route/>
</Routes>

 

3. <Route> 안에 <Route path="/url경로" element={ <보여줄html> } /> 이런 형식으로 작성

<Routes>
     <Route path="/detail" element={ <div>상세페이지</div> } />
     <Route path="/about" element={ <div>어바웃페이지</div> } />
</Routes>

 

4. 결과

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

 

 

반응형

 

 

● 메인페이지로 이동할때

- path에 / 를 입력하면 메인페이지라는 뜻 

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } />

 

● 페이지 이동할때

- 유저들은 주소창에 url 입력해서 들어가지 않고 링크타고 들어감

- 링크를 만들고 싶으면 react-router-dom에서 Link 컴포넌트 import 해오고 원하는 곳에서 <Link> 쓰면 됨

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

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