페이지 이동 / useNavigate()

페이지 이동

1. 패키치 설치

yarn add react-router-dom

 

2. 페이지 컴포넌트 생성

src 폴더에 pages 라는 폴더를 만들고 그 안에 컴포넌트 생성

 

 

3. Router.js 생성 및 route 설정 코드 작성

브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분

src안에 shared 라는 폴더를 생성해주고, 그 안에 Router.js 파일을 생성

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

4. 컴포넌트 별 Route 설정

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
				{/* 
						Routes안에 이렇게 작성합니다. 
						Route에는 react-router-dom에서 지원하는 props들이 있습니다.

						paht는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
				 */}
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

 5. App.js에 Router.js  import 해주기 (App.js 가 최상위 컴포넌트이기 때문)

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

 

 

useNavigate( )

// src/App.js

const App = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
}

export default App;