웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미.
리액트 라우터와 같은 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 알맞는 페이지를 보여주는데, 이후 링크를 눌러서 다른 페이지로 이동하게 될 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아니라, 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존에 페이지에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여줌.
npm i react-router-dom
index.js
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')
);
<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />
Route
컴포넌트는 Routes
컴포넌트 내부에서 사용
App.js
import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import EmptyPage from './component/EmptyPage';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Header />
<Routes>
<Route path="/" element={<DayList />} />
<Route path="/day/:day" element={<Day />} />
<Route path="*" element={<EmptyPage />} />
</Routes>
</div>
);
}
export default App;
Link
컴포넌트를 사용하여 다른 페이지로 이동.
웹 페이지에서는 원래 링크를 보여줄 때 a
태그를 사용하는데, 리액트 라우터를 사용하는 프로젝트에서 a
태그를 바로 사용하면 안됨. 왜냐하면, a
태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문.
Link
컴포넌트 역시 a
태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음.
<Link to="경로">링크 이름</Link>
Header.js
import { Link } from "react-router-dom";
function Header() {
return (
<div className="header">
<h1>
<Link to="/">토익 영단어(고급)</Link>
</h1>
<div className="menu">
<Link to="/" className="link">단어 추가</Link>
<Link to="/" className="link">Day 추가</Link>
</div>
</div>
);
}
export default Header;
URL 파라미터는 useParams
라는 Hook을 사용하여 객체 형태로 조회할 수 있음.
URL 파라미터의 이름은 라우트 설정을 할 때 Route
컴포넌트의 path
props를 통하여 설정.
<Route path="/day/:day" element={<Day />} />
Day.js
import dummy from '../db/data.json'
import { useParams } from 'react-router-dom';
function Day() {
const { day } = useParams();
const wordList = dummy.words.filter(word => word.day === Number(day));
return (
<>
<h2>Day {day}</h2>
<table>
<tbody>
{
wordList.map(word => (
<tr key={word.id}>
<td>{word.eng}</td>
<td>{word.kor}</td>
</tr>
))
}
</tbody>
</table>
</>
)
}
export default Day;
useNavigate
는 Link
컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook
Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줌
import { useNavigate } from 'react-router-dom';
function Func() {
const navigate = useNavigate();
const onClickImg = () => {
navigate(`/comment/id/등등 내가 원하는 주소`);
};
return (
<img src={...} alt={...} onClick={onClickImg} />
);
}
export default Func;
1. useNavigate의 인자
navigate("../success", { replace: true});
첫 번째 인자로는 주소를 받으며 두 번째 인자로 { replace, state } 인수를 사용.
true를 사용한다면, navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않음. 이 때는 자신의 메인 페이지 ("/")로 돌아오게 됨.
false는 뒤로가기가 가능하며 이 것이 기본 값.
2. useHistory
<>
<button onClick={() => navigate(-2)}>
Go 2 pages back
</button>
<button onClick={() => navigate(-1)}>
Go back
</button>
<button onClick={() => navigate(1)}>
Go forward
</button>
<button onClick={() => navigate(2)}>
Go 2 pages forward
</button>
</>
https://velog.io/@chooomu/React-LinkNavLink