#10. 라우터 구현 react-router-dom

라우팅 구현을 위해 react-router-dom 설치

npm install react-router-dom

설치후 App.js에

import { BrowserRouter, Route, Switch } from 'react-router-dom';

→ 앱 전체를 BrowserRouter로 감싸준다.

App.js

import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/">
            <DayList />
          </Route>
          <Route path="/day">
            <Day />
          </Route>
        </Switch>
      </div>  
    </BrowserRouter>
  );
}

export default App;

Switch 내부는 url에 따라 각각 다른 페이지 보여줌.
Switch 외부는 모든 페이지에 공통으로 노출

여기서 경로 “/”는 첫페이지를 의미

그런데 첫페이지(/)랑 /day 페이지 접속해도 똑같은 첫페이지 출력됨(똑같이 DayList 출력)

왜? → Switch로 라우터들을 감싸놓으면 일치하는 첫번째 결과를 보여줌(/day에도 / 포함되어 있기 때문에)

해결방법 <Route exact path=”/”> exact 써준다!

→ 정확히 /일때만 DayList 컴포넌트 출력

⭐️강의 버전은 v5라 현재 v6버전에서는 Switch 못씀

Switch 대신 Routes로 바뀜…

구글링해서 코드 수정함

import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />} />
          <Route path="/day" element={<Day />} />
        </Routes>
      </div>  
    </BrowserRouter>
  );
}

export default App;

<Link>

HTML은 <a>태그 사용하지만, react router는 <Link> 사용함

DayList.js

import { Link } from "react-router-dom";
import dummy from "../db/data.json";

export default function DayList() {
  console.log(dummy);
  return (
    <ul className="list_day">
      {dummy.days.map(day => (
        <li key={day.id}>
          <Link to="/day">Day {day.day}</Link>
        </li>
      ))}
    </ul>
  );
}

개발자 도구 확인해보면 <a> 태그로 렌더링 되었음

react router dom에서 다이나믹한 url 처리할때는 :(콜론) 붙인다.

<Route path="/day/:day" element={<Day />} />

day1로 들어왔을때 day 변수로 1 값 들어감

url에 포함된 값을 얻을때는 react-router-dom에 있는 useParams Hook을 사용한다.

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";

export default function Day() {
  const a = useParams();
  console.log(a);
}

/day/~ 경로에서 ~이 a로 들어감을 확인할 수 있음!

위 코드에서 :day로 줬기때문에 {day: ‘1’} 이렇게 나오는것

Day.js | url에 포함된 day값을 가져오기 위한 코드

const day = useParams().day;
// const { day } = useParams();

또한, word의 data에서 day는 숫자인데 위에서 받은 day는 문자열(’1’)이다.

그대로 filter에서 비교해주면 정상작동 X 니까 위에서 가져온 day를 숫자로 변경해줌.

Number(day) 이렇게.

Router에 없는 주소(명시하지 않은 주소) 접속했을때 처리

<Route path="/*" element={<EmptyPage />} />

강의 버전이랑 달라서,, 구글링함

참고 링크
react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법)

EmptyPage.js

import { Link } from "react-router-dom";

export default function EmptyPage() {
  return (
    <>
      <h2>잘못된 접근입니다.</h2>
      <Link to="/">돌아가기</Link>
    </>
  )
}