React Router3

• 

  [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.