React 라우터 사용

1. npm react-router react-router-dom 설치

 적용하고자 하는 프로젝트로 이동 후 "npm install react-router react-router-dom" 입력 후 설치

npm install react-router react-router-dom

2. index.js에서 App을 BrowserRouter로 감싸기

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

3. Routes 설정

import React, {useEffect} from "react";
import {Route, Routes, useNavigate} from "react-router";
import AboutPage from "pages/about/AboutPage"
import MainPage from "./pages/main/MainPage";

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

    useEffect(() => {
        navigate('/main')
    }, [])
  return (
      <Routes>
        <Route path='/main' element={<MainPage/>}/>
        <Route path='/about' element={<AboutPage/>}/>
      </Routes>
  );
}

 Routes로 감싼 후 Route에서 path는 baseUrl 뒤에 올 주소를 말한다. Ex) xxx.com/main, BaseUrl/about

element는 어떤 페이지를 열어야 하는지 알려주기 위해 필요하다.

4. 페이지 이동

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

// MainPage 코드 일부분
function MainPage() {
    const navigate = useNavigate();
    return (
      <div>
      	  // Click 이벤트 발생 시 /about 로 이동
          <span onClick={() => navigate('/about')}/>
      </div>
    );
}

페이지 이동은 link, navigate 등 많은 방법이 있지만 그 중 click 이벤트때 페이지 이동할 수 있는 navigate만 올릴려고 한다.

사용법은 간단하게 useNavigate()를 선언 후 클릭 시 이동하고 싶은 주소만 입력하면 된다.

 

아래는 공부하면서 몰랐던 부분을 적었다.

useEffect이란?

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. 위의 경우에는 effect를 통해 문서 타이틀을 지정하지만, 이 외에도 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있습니다.

 

참고 주소

Using the Effect Hook – React