[REACT] router

1. Getting Started(ㅋㅋㅋ)

router를 설치합니다.

yarn add react-router-dom

index.js에서 셋팅해 줍니다.

import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

import { BrowserRouter } from “react-router-dom”;

을 추가하고 

 

<BrowserRouter>
      <App />
</BrowserRouter>

App을 BrowserRouter로 감싸줍니다.

 

BrowserRouter를 HashRouter로 변경해서 작업해도 됩니다.

(주소에 /#/가 추가됩니다.

사용하는 이유 : 서버에 직접적으로 접속하지 못하게 하기 위함)

 

2. App.js에서 사용하기

import { Link, Route, Routes } from "react-router-dom";
import Detail from "./components/Detail";


function App() {
  return (
      <Routes>
        <Route path="/" element={<div>메인페이지예요</div>}></Route>
        <Route path="/detail" element={<Detail />}></Route>
        <Route path="/:id" element={<div></div>}></Route>
      </Routes>
  );
}

- Detail component

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Detail = () => {
  let navigate = useNavigate();
  return (
  <div className="container">
    <div className="row">
      <div className="con-md-6">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" alt="신발 이미지" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt5">상품명</h4>
        <p>상품 설명</p>
        <p>120000원</p>
        <button type="button" className="btn btn-danger">주문하기</button>
        <button type="button" className="btn btn-danger" onClick={() => navigate(-1)}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
};

export default Detail;

https://velog.io/@soryeongk/ReactRouterDomV6

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

react router가 버전이 올라가면서(ver.6)
기존에 사용하던 Switch, useHistory를 사용하지 못하게 되었습니다.
Switch는 Routes로, 
useHistory는 useNavigate로 사용법이 변경되었는데,
에러로 잡아내기에는 어려운 부분이어서 3~4시간 정도 검색했던 듯 합니다.
다행히 벨로그 글을 보고 수정할 수 있게 되었습니다.

개발자 커뮤니티는 너무 따뜻한거 같아요 :)

 

3. useParams() 사용하기

- App.js(App() > return > Routes)

<Route path="/detail/:paramId" element={<Detail shoes={shoes} />}></Route>

Route path에서 /:id 를 설정하고

 

- Detail component

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';

const Detail = ({shoes}) => {
  let navigate = useNavigate();
  let { paramId } = useParams();
  let elem = shoes.filter(x=>x.id === parseInt(paramId))[0];
  const { id,title,content,price } = elem;
  return (
  <div className="container">
    <div className="row">
      <div className="con-md-6">
        <img src={`https://codingapple1.github.io/shop/shoes${ id+1 }.jpg`} width="100%" alt="신발 이미지" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt5">{ title }</h4>
        <p>{ content }</p>
        <p>{ price }원</p>
        <button type="button" className="btn btn-danger">주문하기</button>
        <button type="button" className="btn btn-danger" onClick={() => navigate(-1)}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
};

export default Detail;

useParams()를 사용해 주소에서 id값을 받아와 해당 디테일을 노출해 줍니다.