π΄ Introduction
βͺ 리μ‘νΈ SPA ꡬ쑰μμ νμ΄μ§λ₯Ό μ΄λνλλ‘ λμμ£Όλ λΌμ΄λΈλ¬λ¦¬
π Official
π‘ Install
npm i react-router-dom
π’ Usage
// [ Router ]
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Coins from "./routes/Coins";
import Coin from "./routes/Coin";
import Price from "./routes/Price";
import Chart from "./routes/Chart";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Coins />} />
<Route path="/:coinId" element={<Coin />}> {/* π URL parameter */}
{/* π Nested Router */}
<Route path={`price`} element={<Price />} />
<Route path={`chart`} element={<Chart />} />
</Route>
</Routes>
</BrowserRouter>
);
}
// π Nested Router
// νμ¬ νλ©΄μ μΌλΆκ° Routeλ‘ μΈν΄ νλ©΄ μ νλ¨
// [ Coins -> Coin ]
import { Link } from "react-router-dom";
const Coins = () => {
return (
<>
{data.map((item) => (
{/* π URL parameter */}
<Link to={`/{item.id}`} state={item}>{item.name}</Link>
)}
</>
);
}
// π URL parameter
// to : Route κ²½λ‘ μ§μ
// state : λκ²¨μ€ λ°μ΄ν°
// [ Coin -> Chart ]
import { useLocation, useMatch, Outlet } from "react-router";
import { useParams, Link } from "react-router-dom";
interface RouteParams {
coinId: string;
}
interface RouteState {
state: {
name: string;
};
}
const Coin = () => {
// π get URL parameter
const { coinId } = useParams<keyof RouteParams>() as RouteParams;
// π get state data from <Link> state
const { state } = useLocation() as RouteState;
// π useMatch : νμ¬ μμΉλ₯Ό κΈ°μ€μΌλ‘ μ§μ λ κ²½λ‘μ λν μΌμΉ λ°μ΄ν°λ₯Ό λ°νν©λλ€.
const priceMatch = useMatch("/:coinId/price");
const chartMatch = useMatch("/:coinId/chart");
return (
<>
<Tabs>
<Tab isActive={chartMatch !== null}>
<Link to={`/${coinId}/chart`}>Chart</Link>
</Tab>
<Tab isActive={priceMatch !== null}>
<Link to={`/${coinId}/price`}>Price</Link>
</Tab>
</Tabs>
<Outlet context={{ coinId }} /> {/* π Nested Route */}
</>
);
}
// π Nested Route
// Outlet : Nested Routeλ₯Ό μ¬μ©νκΈ° μν μ₯μΉ
// context : Nested Route data μ λ¬
import { useOutletContext } from "react-router-dom";
interface ChartProps {
coinId: string;
}
const Chart = () => {
// π <Outlet context={} />λ₯Ό ν΅ν΄μ λ°μ νλΌλ―Έν° λΆλ¬μ€λ Hook
const { coinId } = useOutletContext<ChartProps>();
return <></>;
};
'React > Library' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[ React ] classnames (0) | 2022.08.04 |
---|---|
[ React ] redux (0) | 2022.08.02 |
[ React ] react-helmet (0) | 2022.07.30 |
[ React ] recoil (0) | 2022.07.30 |
[ React ] apexchart (0) | 2022.07.30 |