React Router

SPA(single page application)

페이지가 한 개인 애플리케이션
한 개의 페이지 안에서 여러 개의 페이지를 보여주는 방법 => Routing

Routing

다른 경로에 따라 다른 화면을 보여줌
리액트 자체에는 기능 내장 x => Router 설치 필요
리액트가 Framework가 아닌 Library인 이유

React Router 세팅

react-router 설치

npm install react-router-dom --save

Router.js 컴포넌트 구현

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

import Login from './ pages/Login/Login';
import Main from './ pages/Main/Main';
import Signup from './ pages/Signup/Signup';

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/signup" element={<Signup />} />
        <Route path="/login" element={<Login />} />
		<Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

index.js 수정하기

-App > Router로 수저

ReactDOM.render(<Router />, document.getElementById('root'));

>Route 이동하기

Link
클릭 시 바로 이동하는 로직 구현 시 사용
ex) nav bar, menu 목록에서 아이템 클릭 시 해당 페이지도 이동할 때 사용

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

useNavigate
페이지 전환 시 추가 처리 필요한 로직 구현 시 사용
ex) 로그인 화면
로그인 버튼 클릭 > 백엔드 서버로 데이터 전송 > 유저 정보 인증/인가 > response 메시지 ...

import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate("/main");
  };

  // 실제 활용 예시
  // const goToMain = () => {
  //   if(response.message === "valid user"){
  //     navigate('/main');
  //   } else {
  //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  //     navigate('/signup');
  //   }
  // }

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;