[프론트엔드] react router v6 history 사용법

728x90

이전 글

2022.03.17 - [프론트엔드/React] - [프론트엔드] react router v6 서브라우팅

1. history 사용 예제

- App.js

App.js에서는 <HistorySample /> 컴포넌트를 렌더링하고, History 경로로 호출한다.

위에서 li 태그로 History 경로를 추가해준다.

import React from 'react';
import {Link, Route, Routes} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';
import HistorySample from './HistorySample';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필</Link>
        </li>
        <li>
          <Link to="/history">History 예제</Link>
        </li>
      </ul>
      <hr/>
    <Routes>
      <Route path="/" element={<Home />}  exact={true}/>
      <Route path="/about" element={<About />} />
      <Route path="/info" element={<About />} />
      {/* 서브라우팅 */}
      <Route path="/profiles/*" element={<Profiles />} />
      <Route path="/history" element={<HistorySample />} />
    </Routes>
    </div>
  );
};

export default App;

2. history, useHistory 대신 useNavigate로 교체

v5에서 사용하던 history객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 사용이 가능했다.

앞으로 v6부터 useHistory는 아예 사라졌고, history도 기존에 선언하는 방식처럼 선언하면 안된다

"useNavigate를 사용해야 한다"

- HistorySample.js

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

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

	// 뒤로가기
	// 인덱스로 처리, 두번 뒤로 가고싶으면 -2
	const handleGoBack = () => {
		navigate(-1);
	}

	// 홈으로 가기
	const handleGoHome = () => {
		navigate('/');
	}

        return (
            <div>
                <button name="back" onClick={handleGoBack}>뒤로</button>
                <button name="go" onClick={handleGoHome}>홈으로</button>
            </div>
        )
}

export default HistorySample;

3. 화면 결과