React & Library/Router5

• 

  [React / Router] Link 에서 state로 값 넘기기 전달하는 Link // state로 주면 된다. {coin.name} → 이렇게 하면 state에 값이 넘어간다. react router v6 에서 좀 더 간편해졌다. 예전에는 to 에 객체를 통째로 넣어야 했는데.. 지금은 state에 넣을 수 있게 되었다. state={{ name=coin.name }} 이런 식으로 작성도 가능해졌다. 전달받은 Link의 컴포넌트 전달받은 Link에 해당하는 Component에서는 useLocation 을 사용하도록 한다. useLocation().state를 받기 위해서 const { state } 라고 선언해주어서 사용하면 된다. import { useLocation } from "react-router-dom"; const Coin = (props: any) =.. React & Library/Router 2022. 12. 16.

• 

  [React / Router] url 마지막에 있는 slash 없애기 http://localhost:3000/sub/ { const location = useLocation(); // If the last character of the url is '/' if (location.pathname.match("/.*/$")) { return ( ); } else return null; }; export default RemoveEndUrlSlash; 2. app 컴포넌트 내부에 합성 import React, { useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import AppLayout from "./components/AppLayout"; import .. React & Library/Router 2022. 12. 13.

• 

  [React / Router] v6 - creatBrowserRouter basename (baseURL) 설정 방법 본문 github repository를 이용해서 배포를 해야할 때가 있다. 그럴 때는 아래와 같이 baseURL을 입력해서 root 주소를 설정해주면 된다. import React from "react"; import { createBrowserRouter } from "react-router-dom"; import Coin from "./routes/Coin"; import Coins from "./routes/Coins"; const router = createBrowserRouter( [ { path: "/", element: , }, { path: "/:coinID", element: , }, ], { basename: "/reactMasterCrypto" } // 이 부분 ); export de.. React & Library/Router 2022. 12. 13.

• 

  [React / Router] React Router V6 Guide (Basic) - 부제 : v6 변경점 *참고로 아래 목록은 모두 Function이다. { } 로 불러오는 것 보면 알 수 있다. 0. Router는 props로 꽤 많은 기능을 포함하고 있는 것을 알 수 있다. Router 컴포넌트는 기본적으로 리액트의 context provider 기능을 포함시키고 있다. 그래서 routing 정보를 대부분의 자식 요소와 공유하게 된다. declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; nav.. React & Library/Router 2022. 12. 5.

• 

  [React Router] 특정 경로 접속 시, 다른 경로로 변경 (리다이렉트) 하기 코드 자체는 매우 간단하다. (간단한 몇 줄이지만, 굉장히 자주 쓰이는 코드라서 기록해둔다.) ( {props.history.push( props.history.location.pathname.replace("/theme", "/donation") )} )} /> /theme 라는 경로는 과거에 사용하던 경로였다. 이른 donation 경로로 했으면, 아예 다른 라우터로 잡고, 과거의 경로로 접속할 경우, push로 새로 링크를 잡고 연결해주면 된다. 만약, props 정보로 history를 사용하지 못하는 경우는 useHistory를 연결하고나서 사용하면 되겠다. 그런 경우는 아마....router 컴포넌트는 아닐 것 같다. React & Library/Router 2021. 8. 2.