라우팅이란?
웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지를 구성할 수도 있습니다.
Route
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
const App = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
};
export default App;
사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주기 위해서 Route 라는 컴포넌트를 통해 라우트 설정을 해주어야 합니다.
<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />Link
a 태그 vs link
웹 페이지에서는 원래 링크를 보여줄 때 a 태그를 사용해왔다. 하지만 리액트 라우터를 사용하는 프로젝트에서 a 태그를 바로 사용하면 안된다.
why?
a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문이다..
Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
Link 컴포넌트는 다음과 같이 사용합니다.
<Link to="경로">링크 이름</Link>NavLink
NavLink 는 Link의 특별한 버전입니다.
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됩니다.
-공식문서-
Link 컴포넌트로 작업할 경우, 현재 URL과 해당 링크로 이동할 URL을 비교하여, 클래스를 추가 혹은 삭제 해주는 별도 처리가 필요하다.
But!! NavLink를 이용하면 조금 더 간단하게 처리가 가능하다.
<NavLink
to="/faq"
activeStyle={{
fontWeight: "bold",
color: "red"
}}
>
FAQs
</NavLink>active된 아이템의 css를 설정해줄 수 있다.
자세한 내용은 여기서
https://v5.reactrouter.com/web/api/NavLink
중첩 라우터 outlet
하나의 파일에 모든 경로를 지정하고 중첩영역 렌더링 요소에는 Outlet 속성을 제공하여 더욱 간결하게 중첩된 라우트 구조를 사용하도록 개선되었다.
const App = () => {
return (
<Routes>
<Route path="/user" element={<UserPage />} >
<Route path="profile" element={Profile} />
<Route path="account" element={Account} />
</Route>
</Routes>
)
}
const UserPage = () => {
reuturn (
<Tabs />
<Outlet /> // path 에 따라 Profile 또는 Account 랜더링
)
}
라우터 API
useNavigate
useNavigate 는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook 이다.
Navigate
Navigate 컴포넌트는 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트입니다. 즉, 페이지를 리다이렉트 하고 싶을 때 사용한다.
Parameter 전달과 취득
페이지 이동시, 파라미터 전달 방법
1) useNavigate() 훅으로 navigate 함수를 취득한다.
2) navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다.
navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) sample code
import { useNavigate } from 'react-router-dom';
export default function Test() {
const navigate = useNavigate();
const move = () => {
// 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다.
navigate('/hyom', {
state: {
id: 1,
job: 'student'
}
});
};
return (
<div>
<button onClick={move}>이동</button>
</div>
);
}
이동한 페이지에서, 파라미터 취득 방법
1) useLocation() 훅으로 location을 취득한다.
2) locaiton.state 로 전달 받은 파라미터를 취득할 수 있다.
- location.state.키
아래 예제코드는 전달 받은 id와 job을 취득하여 화면에 표시한다.
import { useLocation } from 'react-router-dom';
export default function Test2() {
// 1. useLocation 훅 취득
const location = useLocation();
// 2. location.state 에서 파라미터 취득
const id = location.state.id;
const job = location.state.job;
return (
<div>
<p>id: {id}</p>
<p>job: {job}</p>
</div>
);
}