[리액트] 페이지 이동(Routes)

리액트를 처음 사용했을 때, 페이지 이동을 a태그를 사용하여 href를 통해 페이지를 이동했었습니다.

하지만 해당 방식을 사용하면 리액트를 사용할 필요가 없습니다.

리액트를 사용하면서 페이지 이동하는 방법을 포스팅 해보겠습니다.

 

버튼 클릭 시. '/user/home'

 

버튼 클릭 시. '/user/mypage'

Routes를 사용하기 위해서는 

npm install react-router-dom 설치 해주셔야 합니다.

 

프로젝트 구조

 

App.js 전체 코드

import "./styles.css";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './home';
import Mypage from './mypage';


export default function App() {
  
  return (
    <div className="App">
     
    <BrowserRouter>
          <Routes>
              <Route path={"/user/home"} element={<Home />}></Route>
              <Route path={"/user/mypage"} element={<Mypage />}></Route>
          </Routes>
        </BrowserRouter>
      </div>
  );
}

home.js 전체 코드

import "./styles.css";
import { useNavigate } from "react-router-dom";

export default function home() {
  const movePage = useNavigate();

  function gohome(){
     movePage('/user/mypage');
   }
  return (
    
    <div className="home">
        홈 입니다.
        첫 페이지
      <button onClick={gohome}>홈으로이동</button>
      </div>
  );
}

mypage.js 전체 코드

import "./styles.css";
import { useNavigate } from "react-router-dom";

export default function mypage() {
  const movePage = useNavigate();

  function gohome(){
     movePage('/user/home');
   }
  return (
    <div className="mypage">
      마이페이지 입니다.
      <button onClick={gohome}>홈으로이동</button>
      </div>
  );
}