[React] Movie-app Notes - router

qeiqiemยท2021๋…„ 11์›” 13์ผ
0

[React] Movie-App

๋ชฉ๋ก ๋ณด๊ธฐ
11/11

๐Ÿ“’ Nomad Coder ReactJS๋กœ ์˜ํ™” ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ
๊ฐ•์˜๋…ธํŠธ (2021 Updated ver.)


router
: component๋ฅผ ์ฐพ๋Š” url

a ํƒœ๊ทธ๋ฅผ ์“ฐ๋ฉด ์ „์ฒดํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ ์—…๋ฐ์ดํŠธ๋จ
ํ•˜์ง€๋งŒ link๋ฅผ์“ฐ๋ฉด ์ƒˆ๋กœ๊ณ ์นจ x

url id๊ฐ’ ์•Œ์•„๋‚ด๊ธฐ

import { useParams } from "react-router-dom";
function Detail() {
    const x = useParams();
    console.log(x);
    return <h1>Details..</h1>;
}

export default Detail;

 <Route path="/movie/:id" element={<Detail />} />
 // ์—ฌ๊ธฐ ์ ์€ url๊ฐ’(=id) ๊ทธ๋Œ€๋กœ ๋„˜๊ฒจ์คŒ

๊ทธ๋ž˜์„œ ์ด ์•„์ด๋””๊ฐ’์„ ๋ณ€์ˆ˜๋กœ ๋„ฃ์œผ๋ฉด

import { useParams } from "react-router-dom";

function Detail() {
    const { id } = useParams();
    console.log(id);
    return <h1>Details..</h1>;
}

export default Detail;

profile
๊ฒ…๋ถ€ํ•˜์ž

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