navigation

Web APIs - History

const handleClick = (event) => {
    // ์ด๋ฒคํŠธ๋ฅผ ๋ง‰์•„์ค€๋‹ค.
    event.preventDefault();
    // ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ƒํƒœ, ์ œ๋ชฉ, ์ฃผ์†Œ๋ฅผ ๋ฐ›๋Š”๋‹ค.
    window.history.pushState(null, null, '/');
}

react router dom์—์„œ ์ œ๊ณตํ•˜๋Š” Link ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜์ง€ ์•Š๊ณ ๋„ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋‹ค.

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

<Link to="/">Home</Link>

NavLink๋Š” 'active', 'pending' ์ƒํƒœ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ๋‘ ์ƒํƒœ๋Š” boolean ๊ฐ’์œผ๋กœ true, false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ƒํƒœ์— ๋”ฐ๋ผ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. css, className, style ์†์ƒ ์ „๋ถ€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

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

<NavLink to="/" active={}>Home</NavLink>

Navigate๋Š” ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™์‹œํ‚ค๋Š” ์ปดํฌ๋„ŒํŠธ์ด๋‹ค. Redirect์™€ ๋น„์Šทํ•˜์ง€๋งŒ Navigate๋Š” ํŠน์ • ์กฐ๊ฑด์— ๋”ฐ๋ผ ํŽ˜์ด์ง€๋ฅผ ์ด๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

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

<Navigate to="/"  />

useNavigate

useNavigate hook์„ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

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

const navigate = useNavigate();

const handleClickLogout =()=> {
    navigate('/');
}

<button type="button" onClick={handleClickLogout}>Log out</button>

useNavigate hook option

  • replace: true๋กœ ์„ค์ •ํ•˜๋ฉด ์ด๋™ํ•œ ํŽ˜์ด์ง€๋ฅผ history์— ๋‚จ๊ธฐ์ง€ ์•Š๋Š”๋‹ค.

  • state: ์ด๋™ํ•œ ํŽ˜์ด์ง€์— state๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.

  • preventScrollRest: true๋กœ ์„ค์ •ํ•˜๋ฉด ์ด๋™ํ•œ ํŽ˜์ด์ง€์—์„œ ์Šคํฌ๋กค ์œ„์น˜๋ฅผ ์œ ์ง€ํ•œ๋‹ค.

  • relative: 'path'๋กœ ์„ค์ •ํ•˜๋ฉด ํ˜„์žฌ ๊ฒฝ๋กœ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•œ๋‹ค.

โœ๏ธ ์ •๋ฆฌ

  • ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ

Last updated