오열매의 코딩 공간

1. Outlet Outlet은 정의한 Router에서 특정 path에 해당하는 경로에 children이 있을 때, 해당 컴포넌트를 렌더링하도록 해주는 컴포넌트이다. 반드시 부모 컴포넌트 내에서 정의해줘야 한다. 그래야 해당 컴포넌트의 자식 컴포넌트와 연결이 가능하기 때문이다. * Router.tsx (일부) { path: "/users/:userId", element: , children: [ { path: "followers", element: , }, ], }, # 앞에 "/" 를 붙이면 절대경로(맨 처음부터 시작), 붙이지 않으면 부모 path에서부터 시작하는 상대경로이다. * User.tsx (일부 ... Followers 컴포넌트의 부모 컴포넌트) See Followers! Link 컴포넌트를..

URL에 있는 정보를 가져와 string으로 리턴한다. 1) Router.tsx (일부 / createBrowserRouter 이용) { path: "/users/:userId", element: , }, # /users 에는 유저가 볼 수 있는 정보가 없으므로 바로 할당 2) Home.tsx (일부 / 위 코드의 기본 루트가 Home.tsx로 지정되어 있다.) {users.map((user) => ( {user.name} ))} Link에 의해 해당 버튼을 누르면 user.id가 들어간 url로 이동하게 된다. 3 ) User.tsx (일부) export default function User() { const { userId } = useParams(); return ( {`User with id $..

import { createBrowserRouter, RouterProvider, // Navigate, } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; import NotFound from "./screens/NotFound"; import ErrorComponent from "./components/ErrorComponent"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/ab..

(Router.tsx 파일을 따로 분리해서 진행 / App.tsx -> Root.tsx) 1) Router.tsx import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/about", element: , }, ], }, ]); export default functi..

npm i react-router-dom ... React Router Dom: 어플리케이션에 URL을 가질 수 있도록 해준다. // [router.tsx] import { BrowserRouter, Routes, Route } from "react-router-dom"; function Router() { return ( ); } export default Router; * 상위 tsx파일 (index.tsx / app.tsx)에 를 추가해줘야 함