[React] 라우팅 복습

오늘은 저번에 만든 폴더 구조를 가지고 App.js에서 라우팅을 해보겠습니다.

 

먼저 npm i react-router-dom --save를 터미널에 입력해서 설치해줍니다.

 

Feature Overview v6.22.1 | React Router

Feature Overview v6.22.1 | React Router

 

React Router 홈페이지입니다.

 

여기서 import문을 복사해오면 편하게 코딩할 수 있습니다.

 

import {

  BrowserRouter as Router,

  Routes,

  Route,

  Link

} from "react-router-dom";

 

필요한 모듈을 import해오고

 

프로젝트 구조

 

프로젝트 구조가 이런 모양인데

 

각 페이지 파일들을 app.js로 import 해오면 될 것 같습니다.

 

import LandingPage from "./components/views/LandingPage/LandingPage";

import LoginPage from "./components/views/LoginPage/LoginPage";

import RegisterPage from"./components/views/RegisterPage/RegisterPage";

 

 

다음은 Route코드를 짜주면 됩니다.

 

function App() {

  return (

    <Router>

      <div>

        <Routes>

          <Route exact path="/" element = {<LandingPage />} />

          <Route exact path="/login" element = {<LoginPage />} />

          <Route exact path="/register" element = {<RegisterPage />} />

        </Routes>

      </div>

    </Router>

  );

}

export default App;

 

메인화면에서는 LandingPage 컴포넌트가 실행되고

 

로그인 페이지와 회원가입 페이지에서는 각자의 컴포넌트가 실행될 것입니다.

 

import React from 'react'

function LandingPage() {

  return (

    <div>

      LandingPage

    </div>

  )

}

export default LandingPage

 

확인을 위해 문구를 띄워보겠습니다.

 

실행시켜 보면

localhost:3000

 

 

메인화면에서는 LandingPage 컴포넌트의 내용이 나오고

 

localhost:3000/login

 

로그인 페이지에서는 LoginPage 컴포넌트의 내용이 출력되는 모습입니다.

 

간단한 라우팅 복습이었습니다.

 

감사합니다!