카테고리 없음

React Router란?

pracoding 2025. 3. 29. 20:50

React Router: React 앱에서 페이지 이동을 가능하게 해주는 라이브러리

 

React 자체는 "SPA(Single Page Application)"라서, 기본적으로 페이지 이동이 안 된다.

그래서 React Router가 필요하고 이를 통해 URL에 따라 다른 컴포넌트를 보여줄 수 있다!

 

ex) 사용법

홈 페이지, 소개 페이지, 연락처 페이지로 이동하는 React 앱을 만든다고 한다면..

/ -> 홈페이지

/about -> 소개 페이지

/contact -> 연락처 페이지

 

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

<Route path ="/about" element = {<About />} />

<Route path ="/contact" element = {<Contact />} />

 

- App.jsx

import {BrowserRouter, Routes, Route} from "react-router-dom";

import Home from "./Home";

import About from "./About";

import Contact from "./Contact";

 

function App(){

  return (

      <BrowserRouter>

           <div>

                <h1> My website </h1>

                <Routes>

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

                   <Route path ="/about" element = {<About />} />

                   <Route path ="/contact" element = {<Contact />} />

               </Routes>

          </div>

       </BrowserRouter>

     );

}

 

export default App;

 

-Home.jsx

export default function Home() {

    return <h2> Homepage </h2>

 }

 

-About.jsx

export default function About(){

     return <h2> Introduction Page </h2>; }

 

-Contact.jsx

export default function Contact(){

   return <h2> Contact Page </h2> ; }