리액트 라우터(React Router) 사용법(2)

리액트 라우터 사용법(1) 에 이어서 작성합니다.

 

1. 프로젝트에 라우터 적용하기

   src/App.js 파일에서 react-router-dom 에 내장되어 있는 BrowserRouter 라는 컴포넌트를 사용하면 됩니다.

2. 페이지컴포넌트 만들기

    라우터를 통해 여러 페이지로 구성된 웹 페이지를 만들기 위해 각 페이지에서 사용할 컴포넌트를 만듭니다.

    사용자가 웹페이지 처음 들어올 때 보이는 Home 페이지와 웹사이트 소개하는 About 페이지를  pages 폴더에 만들어 봅니다.

    파일은 src/pages/Home.js , src/pages/About.js. 두 개 생성합니다.

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>힘이나는 코딩 홈 페이지 입니다.</p>
    </div>
  );
};

export default Home;

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
    </div>
  );
};

export default About;

컴포넌트가 많은 경우 src 폴더 아래 components 폴더나 routes 폴더를 만들어서 하위에 만드는 것이 관리하기에 좋습니다.

지금은 예제 프로젝트라 그냥 src 폴더에 생성하였습니다.

 

3. Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

    브라우저 주소 경로에 따라 컴포넌트를 보여주려면 Route 컴포넌트를 통해 라우트 설정을 해야 합니다.

    Route 컴포넌트는 아래와 같이 사용합니다.

   <Route path="주소규칙" element={보여줄 컴포넌트 JSX} />

   그리고  Route 컴포넌트는 Routes 컴포넌트 내부에서 사용해야 합니다.

   src/App.js 를 아래와 같이 작성합니다.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import './App.css';

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

export default App;

4. Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

    리액트에서는 html에서 사용하는 <a> tag 대신에 다른 페이지 이동시 Link 컴포넌트를 사용합니다.

    사용방법은 다음과 같습니다.

    <Link to="경로">링크이름</Link>

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

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>힘이나는 코딩 홈 페이지 입니다.</p>
      <Link to="/about">소개</Link>
    </div>
  );
};

export default Home;