React Router 리액트 라우터 사용하기


React Router란?

React Router는 React 애플리케이션의 라우팅에 널리 사용되는 라이브러리입니다.

애플리케이션에서 경로를 선언하고 다른 구성 요소에 매핑한 다음 현재 URL을 기반으로 브라우저에서 렌더링할 수 있습니다.


1. React Router npm으로 설치

npm install react-router-dom


2. React Router 사용하기

React Router가 설치되면 구성 요소를 사용 BrowserRouter하여 애플리케이션을 래핑하고 구성 요소를 사용하여 경로를 정의할 수 있습니다

  1. import React from 'react';
  2. import { BrowserRouter, Route } from 'react-router-dom';
  3. import Home from './Home';
  4. import About from './About';
  5. function App() {
  6. return (
  7. <BrowserRouter>
  8. <Route exact path="/" component={Home} />
  9. <Route path="/about" component={About} />
  10. </BrowserRouter>
  11. );
  12. }


애플리케이션에서 두 개의 경로가 정의됩니다.

하나는 구성 요소에 매핑되는 루트 경로( /) Home용이고 다른 하나는 구성 요소 /about에 매핑되는 경로 용입니다.

사용자가 특정 경로로 이동하면 해당 구성 요소가 렌더링됩니다.


Link구성 요소를 사용하여 애플리케이션의 경로 간에 링크를 만들 수도 있습니다.

  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. function Home() {
  4. return (
  5. <div>
  6. <h1>Home</h1>
  7. <Link to="/about">Learn more</Link>
  8. </div>
  9. );
  10. }


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성