[React] 리액트 라우터

라우팅

사용자가 웹사이트를 접근할 때, URL에 따라 서로 다른 컴포넌트를 화면에 표시해줄 수 있다. 이것을 라우팅이라고 한다.

예를 들어서 사용자가 접속한 URL이 www.naver.com?mode=dark 라고 가정해보자.

​

경로(path): www.naver.com

쿼리(query): mode=dark

​

경로와 쿼리 부분을 바탕으로 해당 컴포넌트를 렌더링하는 것, 이 과정을 라우팅이라고 한다.

​

리액트에서는 react-router 라이브러리를 이용하여 라우팅을 구현할 수 있다.

​

​

1. 리액트 라우터 라이브러리 설치

npm install react-router-dom

 

 

2. 페이지 컴포넌트 정의

// Home 컴포넌트
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>홈페이지에 오신 것을 환영합니다!</p>
    </div>
  );
};

// About 컴포넌트
import React from 'react';

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>이 애플리케이션에 대한 정보입니다.</p>
    </div>
  );
};

// Contact 컴포넌트
import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>연락처</h1>
      <p>문의 사항은 여기로 보내주세요.</p>
    </div>
  );
};

 

 

3. 라우터 설정

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

 

4. 링크 추가

// Home 컴포넌트
import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>홈페이지에 오신 것을 환영합니다!</p>
      <Link to="/about">소개 페이지로 이동</Link>
      <Link to="/contact">연락처 페이지로 이동</Link>
    </div>
  );
};