[React] 라우트(Route) - 페이지를 이동시키는 기능 / Link - 링크로 페이지 이동하기

이번 글은 페이지를 이동시켜주는 라우트(Route)를 어떻게 사용하는지에 대한 글이다.

 

---

 

먼저 아래 코드와 같이 설정을 해준다.

 

[ main.jsx ]

=> BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하는 역할

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

 

App 컴포넌트를 감싸줌

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

BrowserRouter가 전체를 감싸고있음

---

 

[ Routes 컴포넌트 ]

Routes 컴포넌트는 페이지를 이동할 때 사용하는 컴포넌트이다.

 

※ 이때 Routes 컴포넌트는 주의사항 2가지가 있다.

첫번째는 <Routes>안에는 <Route>만 들어가야 오류가 발생하지 않는다.

그리고 두번째는 <Routes> 컴포넌트 밖에 다른 컴포넌트가 존재한다면(즉, <Routes>가 감싸고 있지않더라도) 해당 컴포넌트는 모든 페이지에 공통적으로 렌더링된다.

 

[ App.jsx ]

임포트해준다

import { Routes, Route } from "react-router-dom";

 

App 컴포넌트에 최상위 태그로 <Routes>를 감싸준다

=> path에는 경로 이름을 작성해주고 element에는 이동할 주소(컴포넌트)를 작성해준다

<Routes>
	<Route path="/" element={<Home />} />
</Routes>

 

 

---

 

[ NotFound 페이지 ]

아래 코드와 같이 path를 *으로 설정해주면 switch문의 default처럼 위의 경로들에 일치하지 않을 때 렌더링해주게 된다.

(element에 연결된 Notfound는 빈페이지 렌더 시 공통적으로 렌더링될 컴포넌트)

<Routes>
	<Route path="*" element={<Notfound />} />
</Routes>

 

 

---

 

[ Link 컴포넌트 ]

Link는 페이지를 이동시키는 컴포넌트로 html의 <a>와 같은 기능을 한다.

페이지를 링크를 통해 이동시켜야할 때 사용한다.

 

페이지 이동 시 필요한 컴포넌트를 교체하는 식으로 이동하므로 쾌적하게 페이지 이동이 가능하다.

(만약 <a>태그를 사용하여 이동하면 깜빡이는 현상이 발생한다.)

 

Link 사용 시 아래 코드를 먼저 임포트해줘야한다.

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

 

아래 코드는 동일한 페이지 이동이지만 2가지 방식으로 표현한 것이다.

[ Link 사용 ver. ]

return (
	<>
    	<div>
        <Link to={"/"}>Home</Link>
        </div>
    </>
)

 

[ <a> 사용 ver. ]

return (
	<>
    	<div>
        <a href="/">Home</a>
        </div>
    </>
)

 

 

---