제로초 리액트 강의 9.1 리액트 라우터

라우터를 사용하려면 설치부터 해야함!

두 개 모두 설치해야 웹에서 같이 쓸 수 있음

npm i react-router

npm i react-router-dom

 

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

이 둘을 자주 사용 

---

<BrowserRouter />

import React from 'react';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import NumberBaseball from './NumberBaseball';
import RSP from './RSP';
import Lotto from './Lotto';

const Games = () => {
  return (
      <BrowserRouter>
      <div>
        <Link to="/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/lotto-generator">로또추첨기</Link>
      </div>
        <Routes>
          <Route path="/number-baseball" component={NumberBaseball} />
          <Route path="/rock-scissors-paper" component={RSP} />
          <Route path="/lotto-generator" component={Lotto} />
        </Routes>
      </BrowserRouter>
  )
}

export default Games;

---

리액트 라우터는 눈속임

페이지가 여러개 있는게 아니라 여러개 있는 척 하는 것!

페이지가 실제로는 존재하지 않고 리액트 라우터가 가상으로 만들어내는 페이지임

그래서 a태그를 사용하면 에러가 나고 react-router-dom에 있는 Link를 사용해야함!

a태그이기는 하지만 다른 페이지로 넘어가는게 아니라 router를 불러주는 역할을 함

 

이렇게 사용

const Games = () => {
  return (
      <BrowserRouter>
      <div>
        <Link to="/number-baseball">숫자야구</Link> // Link 사용
        <Link to="/rock-scissors-paper">가위바위보</Link>
        <Link to="/lotto-generator">로또추첨기</Link>
      </div>
        <Routes>
          <Route path="/number-baseball" component={NumberBaseball} /> // path에 임의로 정해준 주소 to의 주소와 같음
          <Route path="/rock-scissors-paper" component={RSP} />
          <Route path="/lotto-generator" component={Lotto} />
        </Routes>
      </BrowserRouter>
  )
}

클릭한 컴포넌트를 불러온 것이지 실제로 여러 페이지가 있는 것이 아님

> 주소를 입력하거나, 컴포넌트가 눌러진 상태에서 새로고침을 하면 찾을 수 없음

서버가 인식하고 못찾는다고 함, 검색엔진에게 알려주려면 서버에 세팅을 해줘야함

 

<Link> 부분은 공통인 부분

<Routes> 부분이 화면이 바뀌는 부분

---

<HashRouter />

import React from 'react';
import { HashRouter, Route, Routes, Link } from 'react-router-dom';
import NumberBaseball from './NumberBaseball';
import RSP from './RSP';
import Lotto from './Lotto';

const Games = () => {
  return (
      <HashRouter>
      <div>
        <Link to="/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/lotto-generator">로또추첨기</Link>
      </div>
        <Routes>
          <Route path="/number-baseball" component={NumberBaseball} />
          <Route path="/rock-scissors-paper" component={RSP} />
          <Route path="/lotto-generator" component={Lotto} />
        </Routes>
      </HashRouter>
  )
}

export default Games;

 

생긴건 똑같은데 주소에 #(hash)가 생김

 

<HashRouter />

&amp;amp;amp;amp;amp;lt;HashRouter /&amp;amp;amp;amp;amp;gt;

<BrowserRouter />

&amp;amp;amp;amp;amp;lt;BrowserRouter /&amp;amp;amp;amp;amp;gt;

새로고침해도 동작함

#뒤에 부분은 리액트 라우터랑 브라우저는 앎, 서버는 인식을 못함

> 검색엔진이 잡아내지 못함 그래서 잘 안 씀, 서버에 추가적인 작업을 해줘야함