Router API - wookikiik/react_study GitHub Wiki

useRouteMatch

useRouteMatch์€ match๊ฐ์ฒด์˜ ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” hook์ž…๋‹ˆ๋‹ค.
๋˜ํ•œ ์ธ์ž๋กœ <Route>์ปดํฌ๋„ŒํŠธ์˜ ํ”„๋กœํผํ‹ฐ๋“ค(path, strict, sensitive, exact)์„ ๊ฐ€์ง„ ๊ฐ์ฒด๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ,
๋งŒ์•ฝ pathํ”„๋กœํผํ‹ฐ์™€ ํ˜„์žฌ ํŽ˜์ด์ง€์˜ URL์ด ์ผ์น˜ํ•  ๊ฒฝ์šฐ ํ•ด๋‹น path์˜ match๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ผ์น˜ํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ null์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

๋งŒ์•ฝ ์•„๋ฌด ์ธ์ž๋„ ๋„˜๊ฒจ์ฃผ์ง€ ์•Š๊ณ  ํ•ด๋‹น hook์„ ํ˜ธ์ถœํ•˜๋ฉด withRouter HoC๋กœ
match๊ฐ์ฒด๋ฅผ ์ ‘๊ทผํ–ˆ์„ ๋•Œ์ฒ˜๋Ÿผ ์ œ์ผ ๊ฐ€๊นŒ์šด ๋ถ€๋ชจ <Route> ์ปดํฌ๋„ŒํŠธ์˜ match๊ฐ’์„ ๋ฆฌํ„ดํ•ฉ๋‹ˆ๋‹ค.

// use case 1
const match = useRouteMatch({
  path: '',
  strict: true,
  sensitive: true,
  exact: true,
});

// use case 2
const match = useRouteMatch();
useRouteMatch props
prop discription
path ํ˜„์žฌ ์œ„์น˜์˜ pathname์ž…๋‹ˆ๋‹ค.
strict true๋ฉด, ์Šฌ๋ž˜์‹œ๊ฐ€ ์žˆ๋Š” ๊ฒฝ๋กœ๋Š” ์Šฌ๋ž˜์‹œ๊ฐ€ ์žˆ๋Š” location.pathname๊ณผ ์ผ์น˜ํ•ด์•ผ๋งŒ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค.
sensitive ๋Œ€์†Œ๋ฌธ ๊ตฌ๋ฌธ
exact URL ์ „์ฒด path๊ฐ€ ์ •ํ™•ํ•˜๊ฒŒ ์ผ์น˜
โš ๏ธ **GitHub.com Fallback** โš ๏ธ