CRYPTO TRACKER - (1)Set up

Apeachicetea·2021년 12월 6일
0

CRYPTO TRACKER

목록 보기
1/4

react-router-dom@5.3.0 react-query 설치하기

npm i react-router-dom@5.3.0 react-query

react-router-dom@5.3.0을 설치하는 이유

react-router-dom 버전 6.0.0부터 Switch를 Routes로 바뀌었다고 한다
이 부분만 유의하면 최신 버전을 설치해도 상관없지만 익숙한 이전 버전으로 설치!

src/routes/Coins.tsx && Coin.tsx 생성하기

src/Router.tsx 생성하기

해당 파일에서 routes들을 연결해준다.

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Coins from './routes/Coins';
import Coin from './routes/Coin';

function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Coins />
        </Route>
        <Route path="/:coinId">
          <Coin />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

App.tsx

import Router from "./Router";


function App() {
  
  return (
    <Router></Router>
  );
}

export default App;

Coin.tsx

import { useParams } from "react-router";


interface RouteParams {
  coinId: string;
}
//useParams의 초기값이 빈값이기때문에, 타입스크립트는 오류를 나타낸다.
//그래서 interface를 이용해서 coinId라는 키에 값은 스트링값이 온다는 것을 정의 해주면 된다.

function Coin() {
  const { coinId } = useParams<RouteParams>();
  console.log(coinId);

  return (
    <h1>Coin: {coinId}</h1>
  )
}

export default Coin;
profile
웹 프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2023년 12월 14일

Hello there, CryptoSet gg has swiftly become my go-to destination for discovering exclusive top airdrops https://cryptoset.gg/ . The platform's dedication to showcasing only the finest opportunities ensures users like me can optimize their crypto portfolios. The user-friendly interface facilitates easy exploration and selection of airdrops tailored to individual preferences. What distinguishes CryptoSet gg is the precision and dependability of the information provided, establishing it as a reliable resource for anyone venturing into the dynamic world of crypto airdrops.

답글 달기
comment-user-thumbnail
2024년 1월 25일

I love exploring new online casinos, and an article about the top 15 non-Gamstop casinos caught my eye. It's more than just a list; it's a guide that also explains how to bypass common gaming restrictions. This kind of information is invaluable for gamers looking for fresh experiences. The article, located at Guest Post by CoinPedia News: The Top 15 Non-Gamstop Casinos and How to Bypass Restrictions | CoinMarketCap , is a great starting point for anyone interested in exploring alternative online casinos.

답글 달기