๐Ÿ“ฐ React Router

Dayยท2022๋…„ 4์›” 13์ผ
0

Router


์ปดํฌ๋„ŒํŠธ ๋ณด๋ฉด '/ ' ๊ธฐ๋ณธ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ํŽ˜์ด์ง€.
๋„๋ฉ”์ธ์ด signup์ด ๋˜๋ฉด ~ ๋ณด์—ฌ์ฃผ๊ฒ ๋‹ค


๊ทธ๋Ÿฌ๋‹ˆ๊นŒ, react-router ๊น ๋‹ค์Œ์—๋Š”

Router๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์“ธ ์ˆ˜ ์žˆ์Œ.

login.js main.js์ด๋Ÿฐ ์ปดํฌ๋„ŒํŠธ๋“ค์€ index.js์—์„œ ์“ฐ์ผ๋•Œ ํ•˜๋‚˜์”ฉ๋งŒ ์“ฐ์˜€๋‹ค.

๊ทผ๋ฐ

router.js๋ฅผ ํ†ตํ•˜๋ฉด ํ•œ ํŽ˜์ด์ง€์— ์“ธ ์ˆ˜ ์žˆ์Œ

router.js ์—์„œ log,main ์„ import ํ•œ๋‹ค์Œ์—

export ํ•ด์•ผ ๋˜๊ณ 

index.js์—์„œ๋Š” router์„ import ํ•ด์•ผํ•จ

path๋ž‘ element ๊ฐ’์€ ์ƒ๊ด€์—†์Œ

path ๋Š” ๊ฒฝ๋กœ๋ผ์„œ ๊ทธ๋ƒฅ ๋ง˜๋Œ€๋กœ ํ•˜๋ฉด ๋จ


๊ทผ๋ฐ ๋งํฌ ํƒœ๊ทธ๋กœ ํ–ˆ๋Š”๋ฐ, ๊ฐœ๋ฐœ์ž๋„๊ตฌ ๋“ค์–ด๊ฐ€๋ณด๋ฉด aํƒœ๊ทธ๋กœ ๋ณ€ํ™”๊ฐ€ ๋˜์–ด์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฑด ์‹ ๊ธฐํ•˜๋„ค

์‚ฌ์‹ค ๋งํฌ ํƒœ๊ทธ๋ง๊ณ  a ํƒœ๊ทธ ์จ๋„ ๋œ๋‹ค.

  • link tag๋Š” ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ์ด๋™ํ–ˆ์„ ๋•Œ ๋ณ€ํ™”ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๊ฐ์ง€ํ•ด์„œ ๋ณด์—ฌ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์‹ฑ๊ธ€ํŽ˜์ด์ง€์ฒ˜๋Ÿผ ์ž‘๋™ ๊ฐ€๋Šฅ
  • a tag ์™ธ๋ถ€๋งํฌ๋กœ ์ด๋™ํ•ด์•ผ ๋  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์ด๋Ÿด๋•Œ ์”€
์„ค๋ช…)
์ผ๋‹จ useNavigate๋ฅผ import ํ•˜๊ณ ,

ํ•จ์ˆ˜ ์•ˆ์— 
useNavigate(); ๋ผ๋Š” ๊ฒƒ์„ ๋ณ€์ˆ˜์— ๋‹ด๋Š”๋‹ค.

์‹ค์ œ๋กœ ์“ธ๋•Œ๋Š”, onclickํ•  ๋•Œ๋งˆ๋‹ค {goTomain}์•ˆ์˜ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ฒ ๋‹ค. ๋กœ ์“ฐ๋ ค๋ฉด,

์œ„์— ์ •์˜์—  function goTomain(){
navigate('/main')}; ๋กœ ํ•ด๋‘๋ฉด ๋จ.

link๋Š” ๋‹จ์ˆœํžˆ ์ด๋™.
useNavigate()๋Š” ์ถ”๊ฐ€์ ์œผ๋กœ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•  ๋•Œ ์“ด๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€