[리액트(React)] 라우터(Router)

// 라우터, Router

- 웹 애플리케이션에서 다양한 페이지 간의 이동을 관리해주는 도구

- SPA(Single Page Application)에서 client side routing 을 가능하게 해준다.

- 페이지를 새로고침하지 않고도 URL을 변경할 수 있다.(컴포넌트 렌더링 가능)

---

1. 설치

npm install react-router-dom

---

2. route 정의

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([{ path: '/경로', element: jsx코드 }]);

- createBrowserRouter() 함수를 호출하고 그 함수에 route definition 객체 배열을 전달한다.

- path: 이동할 url 경로

- element: 해당 url에서 렌더링될 내용(jsx 코드)

 

---

3. router 활성화 및 route 로딩

const router = createBrowserRouter([{ path: '/경로', element: jsx코드 }]);
function 컴포넌트명() {
  return <RouterProvider router={router} />;
}

- 정의한 router를 사용한다고 react에게 알리기 위해 RouterProvider 컴포넌트를 사용한다.

- RouterProvider 의 필수 property로 router를 전달한다.

---

- createRoutesFromElements도 사용 가능하다.

import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';

const routeDefinitions명 = createRoutesFromElements(
  <Route>
    <Route path="/url" element={jsx코드(컴포넌트)} />
  </Route>,
);

const router = createBrowserRouter(routeDefinitions명);

---

4. 페이지 이동

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

<Link to="/url"></Link>

- 전송하는 브라우저 기본 설정을 막고 router 정의를 참고하여 페이지를 이동한다.

---

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

<NavLink 
  to="/url"
  className={({ isActive }) => isActive ? }
  end
>

- react-router-dom이 isActive property를 제공해주기 때문에 해당 link가  활성화되어 있는지 알 수 있다.

- 만약 정확히 해당 링크와 일치할 때만 활성화되기를 원한다면, end property를 추가한다.

---

const navigate = useNavigate();

navigate('/url');

- useNavigate()는 프로그램적으로 페이지를 이동해야 할 때 사용한다.

---

※ Link에 data 같이 보내기

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

<Link to="/url" state={보낼data}></Link>

---

// children

1. route 정의 + router 활성화 및 route 로딩

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/url',
    element: jsx코드,
    children: [
      { index: true, element: jsx코드 },
      { path: '/url', element: jsx코드 },
    ],
  },
]);

function 컴포넌트명() {
  return <RouterProvider router={router} />;
}

- createBrowserRouter로 router를 정의할 때 property로 children을 추가할 수 있다.

- 그러면 해당 route는 children router들의 부모 route 역할을 한다.

- path 대신 index property를 true로 설정하면, 부모 path에 있을 때 항상 해당 라우트가 활성화된다.

---

2. 부모 route 컴포넌트에서 children 설정

function 부모route컴포넌트명() {
  return (
    <>      
      <Outlet /> <!--children렌더링 -->
    </>
  );
}

- Outelet 컴포넌트로 route에 등록된 children을 렌더링한다.

- Wrapping Layout을 구현할 수 있다.


※ Outlet 컴포넌트(children)에 데이터를 전달할 수도 있다.

<Outlet context={ 전달할data } />

 

const ctx = useOutletContext();

---

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePage from './pages/Home';
import ProductsPage from './pages/Products';
import RootLayout from './pages/Root';
import ErrorPage from './pages/Error';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/products', element: <ProductsPage /> },
    ],
  },
]);
function App() {
  return <RouterProvider router={router} />;
}

export default App;

 

import React from 'react';
import { Outlet } from 'react-router-dom';
import MainNavigation from '../components/MainNavigation';

function RootLayout() {
  return (
    <>
      <MainNavigation />
      <main>
        <Outlet />
      </main>
    </>
  );
}

export default RootLayout;

 

import React from 'react';
import { Link } from 'react-router-dom';
import classes from './MainNavigation.module.css';

function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default MainNavigation;

---

// error 페이지

사이트 내의 잘못된 링크로 접속했을 때 뜨는 에러 창을 직접 만들 수 있다.

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  { 
    path: '/경로', 
    element: jsx코드,
    errorElement: jsx코드
  }
]);

- errorElemnt property를 활용해 error 페이지를 렌더링할 수 있다.

---

import React from 'react';
import MainNavigation from '../components/MainNavigation';

function ErrorPage() {
  return (
    <>
      <MainNavigation />
      <main>
        <h1>An error occurred!</h1>
        <p>Could not find this page.</p>
      </main>
    </>
  );
}

export default ErrorPage;

 

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePage from './pages/Home';
import ProductsPage from './pages/Products';
import RootLayout from './pages/Root';
import ErrorPage from './pages/Error';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/products', element: <ProductsPage /> },
    ],
  },
]);
function App() {
  return <RouterProvider router={router} />;
}

export default App;