리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야합니다.
공식문서 : https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory
(공식문서 링크 변경)
공식문서 : https://reactrouter.com/en/6.21.2/hooks/use-navigate#usenavigate
// This is a React Router v5 app
import { useHistory } from "react-router-dom";
function App() {
let history = useHistory();
return (
<div>
<button onClick={() => {history.push("/main")}}>go home</button>
<button onClick={() => {history.goBack()}}>prev page</button>
<button onClick={() => {history.push(`/product/$parseInt(id)`)}}>detail page</button>
</div>
);
}
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
return (
<div>
<button onClick={() => {navigate("/main")}}>go home</button>
<button onClick={() => {navigate(-1)}}>prev page</button>
<button onClick={() => {navigate(`/product/$parseInt(id)`)}}>detail page</button>
</div>
);
외부링크로 이동하고 싶으면
window.location.replace(링크);
반응형
'D.evelop > React' 카테고리의 다른 글
[React] 리액트란? 사용하는 이유 Why React? (0) | 2021.12.13 |
---|---|
[React]CRA 세팅 Failed to compile 에러 (eslint, prettier) (0) | 2021.11.17 |
[React]함수형 컴포넌트에서의 this.props.history.push(); (0) | 2021.11.08 |
[React]fetch함수와 api를 이용한 통신 실습 (0) | 2021.11.01 |
[React]Link컴포넌트 사용 시 TypeError (0) | 2021.10.31 |
댓글