import { Routes, Route, BrowserRouter } from "react-router-dom";
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Coins />}></Route>
<Route path="/:coinId*" element={<Coin />}></Route>
</Routes>
</BrowserRouter>
);
}
*
을 삽입하여 네스팅을 하겠다는 선언을 미리 할 수 있다.path="/" element={<Home />}
path="/example:key"
:
을 넣고 그 뒤에 Params 변수명을 입력한다.:파라미터명
을 통해 URL으로 입력받는 값을 그대로 Route Element에게 전달해줄 수 있게 되는 것이다.import { useParams } from "react-router-dom";
const key = useParams().key
import { Link } from "react-router-dom";
<Link to={`/example/${key}}`>
<Link
to={item.id}
state={{
name: item.name,
id: item.id,
}}
>
const { state } = useLocation();