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;
6개의 댓글
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.
Hallo vrienden, ik wil jullie vertellen over een cool casino voor alle spelers in Nederland dat ik erg leuk vond. Maneki Casino heeft een indrukwekkende bibliotheek met meer dan 1000 spellen om elk type speler tevreden te stellen. Van klassieke gokkasten tot spannende live casinospellen, er is iets voor elke stemming en smaak. Ik hou vooral van de verscheidenheid aan themagokkasten en de opwinding om regelmatig nieuwe spellen te ontdekken. De brede selectie zorgt ervoor dat verveling hier nooit een optie is. Ik raad je aan om hun website te bekijken, daar vind je nog veel meer informatie.
I've recently come across an online platform that has completely transformed my gaming experience. The diversity of games available is truly impressive, catering to all sorts of preferences. Being based in Australia, I've found the interface to be incredibly smooth, making it a joy to use. You can check it out yourself brango . It's user-friendly and reliable, perfect for gamers like myself who value a seamless experience. It's definitely worth a visit for those in search of a top-notch gaming site.
I've discovered a gem during my online gaming adventures in Australia. Diving into the thrilling world of this site is like stepping into an oasis for game enthusiasts. There's something incredibly engaging about its user-friendly interface, which makes the gaming Spin Oasis experience even more captivating. Believe me, once you've tried this, you'll know exactly what I'm talking about. It's my secret escape for some fun and relaxation.
I’m skeptical about a crypto license India https://finlaw.in/crypto-lawyer. While regulation is needed, it’s crucial that it doesn’t hinder innovation. We need to find the right balance! A well-structured crypto licensing system could help weed out bad actors and promote responsible trading practices within the industry. Exploring services to obtain a crypto license India? Connect with experts at Finlaw Consultancy for comprehensive guidance and support tailored to navigate regulatory requirements effectively. Contact us for more information.
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.