[React] 리액트 라우터(Router) 설정하기

최근 리액트 라우터가 v5 에서 v6로 업데이트 되면서 바뀐 것들을 정리해볼까 한다.

라우터 시작하기

설치

: 먼저 설치를 해준다. 뒤에 6은 버전을 나타낸다.

npm install react-router-dom@6

 

URL 연결

먼저 앱을 브라우저의 URL에 연결한다. BrowserRouter을 전체 앱에 렌더링한다.

index.js

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

 

Routes

: 서로 다른 URL에서 앱을 렌더링 할 수 있게 해준다.

: v6가 릴리즈되면서 Switch가 Routes로 바뀌었다.

index.js

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Home from "./routes/home";
import About from "./routes/about";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="home" element={<Home />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

<Routes>안에 뚫을 라우터를 나열해준다.

이제 "/home"으로 접근하면 를 선언한 곳에 Home컴포넌트가 렌더링 될 것이다.

component가 사라지고, 대신에 element 사용한다.

<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />

 

Route에 exact가 기본으로 되어있음

기존 코드

<Route path="/login" exact component={UsersPage} />

v6 코드

<Route path="/login" element={<UsersPage />} />

 

useNavigate

: useHistory 기능을 전부 대체한다.

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

const navigate = useNavigate();

navigate('/');	// "/"경로로 이동
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

 

Link

: 해당 링크를 클릭하면 to에 할당된 주소로 이동한다.

이동하면 to 링크로 Route에서 설정한 컴포넌트가 렌더링된다.

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

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="about">About</Link>
      </nav>
    </div>
  );
}

 

서브라우트 1

: path에 *사용

<Route path="/users/*" element={<Users />} />

서브 라우트 2

: Outlet 사용

App.js

<Route path="/users/*" element={<Users />} >
  <Route path="" element={<Main />} />
  <Route path="about" element={<About />} />
</Route>

Users.jsx

<Outlet />

 

Nested Routes

: 중첩라우터

<Routes>
	<Route path="/" element={<App />}>
   		<Route path="expenses" element={<Expenses />} />
    		<Route path="invoices" element={<Invoices />} />
	</Route>
</Routes>

"/expenses"와  "/invoices" 로 / 뒤에 중첩된다.

그러나 그 전에 "부모" 경로에 Outlet가 필요하다.

부모경로는 "/"가 될거고, /에서 invoices나 expenses를 클릭하면 Outlet에 중첩으로 렌더링이 될 것이다.

<div>
	<Link to="/invoices">Invoices</Link> |{" "}
    	<Link to="/expenses">Expenses</Link>
    	<Outlet />
</div>

 

상대경로 쓰기

: Link태그의 to 경로 앞에 / 를 붙이지 않으면 된다.

<Link to="" />		// 이렇게 입력하면 현재 페이지로 이동
<Link to="about" />	// 이렇게 입력하면 현재 url에 /about을 붙인 곳으로 이동 -> 단, about앞에 /about을 붙이게되면 진짜 /about으로 이동된다.

<Route path="" />
<Route path="about" />

 

NavLink 에 스타일 적용하기

: isActive 로 삼항연산자 적용하기

<NavLink to="/users" style={({ isActive }) => ({ color: isActive ? 'blue' : 'red' })} >
  Users
</NavLink>

<NavLink to="/users" className={({ isActive }) => "nav-link" + (isActive ? "activated" : "") } >
    Users
</NavLink>