react์—์„œ navigate ์‚ฌ์šฉ (useNavigate)

1549 ๋‹จ์–ด navigateuseNavigateReactReact

Link๋Š” ํŠน์ •์ฃผ์†Œ๋กœ ์ด๋™ํ•ด์ฃผ๋Š” ํƒœ๊ทธ, Navigate๋Š” ํŠน์ • ํ–‰๋™ ์ˆ˜ํ–‰์‹œ ํ•ด๋‹น ์ฃผ์†Œ๋กœ ์ด๋™ํ• ์ˆ˜์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

  1. useNavigate ์‚ฌ์šฉ
    useNavigate๋Š” ์–‘์‹ ์ œ์ถœ ํ˜น์€ ํŠน์ • event ๋ฐœ์ƒ์‹œ url ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” interface ์ œ๊ณต
  • useNavigate ์ธ์ž
    ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ์ฃผ์†Œ๋ฅผ ๋ฐ›๊ณ , ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ {replace : state} ์ธ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
    • replace(true or false)
      • true : nav์— ์ ํžŒ ์ฃผ์†Œ๋กœ ๋„˜์–ด๊ฐ„ ํ›„ ๋’ค๋กœ๊ฐ€๊ธฐ ํ•ด๋„ ๋ฐฉ๊ธˆ ํŽ˜์ด์ง€๋กœ ๋Œ์•„์˜ค์ง€ ์•Š์Œ. ์ž์‹ ์˜ ๋ฉ”์ธ ํŽ˜์ด์ง€๋กœ ๋Œ์•„์˜ค๊ฒŒ ๋จ.
        • false : ๋’ค๋กœ๊ฐ€๊ธฐ ๊ฐ€๋Šฅ
  • useHistory ๊ธฐ๋Šฅ ํฌํ•จ
<>
  <button onClick={() => navigate(-2)}>
    Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    Go back
  </button>
  <button onClick={() => navigate(1)}>
    Go forward
  </button>
  <button onClick={() => navigate(2)}>
    Go 2 pages forward
  </button>
</>

useNavigate ์‚ฌ์šฉ๋ฒ•

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ