React Router
설치 : npm install react-router-dom@5
index.js파일에 import { BrowserRouter } from 'react-router-dom' 입력
App컴포넌트의 위 아래를 로 덮는다
BrowserRouter를 HashRouter로 변경할 수도 있다.
페이지 나누기
App.js에 import { Link, Route, Switch } from 'react-router-dom' 입력.
Routing은 원하는 곳에 태그를 작성하고
안에 path=""를 입력하고 페이지의 이름을 정한다
ex
div 대신에 작성한 컴포넌트를 보여주고 싶을 때에는
<Route path="/blar" component={ ComponentName }>로
경로에 접속했을 때 그 ComponentName을 보여준다.
React Router 특징 HTML 내부 내용을 갈아치워서 다른페이지를 보여주는것처럼 만든다.
Link
Link는 문자열을 감싸 해당 경로로 이동할 수 있게 만들어준다
Switch
Switch는 url이 여러개가 맞아도 하나만 보여주게 만든다.
routes 폴더 생성 후 components.tsx 생성
src에 Router.tsx 생성
nested router -
한 스크린 내에 또 다른 Router를 갖게 해주는 것
/btc/information
/btc/chart
url의 파라미터를 잡기 위해서는 useParams를 사용한다.
즉 routh의 path /:id를 리액트에 알리고 사용하기 위해서는 useParams로 정의해주어야한다.
useParams는 디테일 페이지에서 정한다.(실제로 상품마다 다르게 보여 줄 페이지이기 때문에)
API를 통해 받아온 데이터를 또 다시 받아와서 처리하는건 UI UX 적으로 좋지 않음.
그래서 받아온 데이터를 계속 활용하기 위해 보이지 않는방식으로 데이터를 처리하는게 중요함.
Link의 to 프롭스에 객체를 넣어 경로와 스테이트를 전달할 수 있다. 즉 오브젝트로도 데이터를 다른 화면으로 보낼 수 있다는 것이다.
<Link
to={{
pathname: `/${coin.id}`,
state: { name: coin.name },
}}
(async () => {
const response = await (
await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
).json();1.fetch api로 데이터를 받아오는 await
2.받아온 데이터를 json으로 변환하는 await
React useHistory
1. useHistory 사용할 페이지에
import { useHistory } from 'react-router-dom'; 임폴트
히스토리 사용시 history.goBack(); 을 통해 뒤로가기를 할 수 있다.
특정 경로로 이동은 history.push( '/urlsource'); 를 통해 이동할 수 있다.
