[React] React Router

react-router 설치

npm i react-router

react-router-dom 설치 (웹에서 쓰는 라이브러리)

npm i react-router-dom

import React from "react";
import { BrowserRouter, HashRouter, Link, Route, Switch } from "react-router-dom";
import NumberBaseball from "../3. 숫자야구/NumberBaseball";
import RSP from "../5. 가위바위보/RSP";
import Lotto from "../6. 로또추첨기/Lotto";
import GameMatcher from "./GameMatcher";

const Games = () => {
  return (
    <BrowserRouter>
      <div>
        <Link to="/game/number-baseball?query=10&hello=J3SUNG&bye=react">
          숫자야구
        </Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임 매쳐 </Link>
      </div>
      <div>
        <Switch>
          <Route
            path="/game/:name"
            render={(props) => <GameMatcher {...props} />}
          />
          <Route
            exact
            path="/"
            render={(props) => <GameMatcher {...props} />}
          />
          <Route
            path="/game/:name"
            render={(props) => <GameMatcher {...props} />}
          />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default Games;

BrowerRouter, HashRouter, Route, Link를 import

BrowserRouter
=> dom을 BrowserRouter로 감싸서 사용, 
    새로고침시 서버가 해당 주소를 찾지 못함, 검색엔진에 탐색 됨

HashRouter
=> dom을 BrowerRouter로 감싸서 사용, 주소의 경로 부분에 #이 있음,
    새로고침을 하는 경우 #주소를 브라우저가 처리해줌, 검색엔진에서 탐색되지 않음

Route
=> 각 가상 주소 페이지를 만들어줌, path - 주소, component - 보여줄 화면

Link
=> Route에 지정되어있는 주소와 연결시켜 줌, to - 주소

 

<Route path="/game/:name" component={GameMatcher} />

params : 동적으로 바뀔 수 있는 값. 위 코드에서 :name이 이에 해당

component 사용하는데 history, location, match가 undefined인 경우
=> withRouter를 통해 사용 가능

import React, { Component, } from 'react';
import { withRouter } from 'react-router-dom';

class GameMatcher extends Component {
  render() {
    return (
      <div>게임매치</div>
    );
  }
}

export default withRouter(GameMatcher);

history : 리액트 라우터를 위한 메소드 (페이지 관련)
match : 동적 주소 라우팅을 할때 params에 대한 정보를 가지고 있음
location : 주소에 대한 정보

 

쿼리스트링 : 주소에 데이터를 전달, 주소 뒤에 ?로 구분하며 key=value 형태로 입력하며, &로 구분
                 '/game/number-baseball?key=value&a=1&b=2&c=3'

URLSearchParams : react-router에서 querystring 처리하기 위해서 사용

let urlSearchParams = new URLSearchParams(this.props.location.search.slice(1));
    console.log(urlSearchParams.get("hello"));

 

Route에서 props넘기는 방법

component 사용

<Route path="/game/:name" component={() => <GameMatcher props="hello" />} />

render 사용

<Route path="/game/:name" render={(props) => <GameMatcher {...props} />} />

여러개의 경로가 일치되면 일치된 모든 컴포넌트가 표시됨
ex)

<Route path="/game/:name" render={(props) => <GameMatcher {...props} />} />
<Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />} />

Switch => 일치된 첫번째 경로만 표시

<Switch>
  <Route path="/game/:name" render={(props) => <GameMatcher {...props} />} />
  <Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />} />
</Switch>

 

exact => 완전히 일치된 경로만 표시

<Route exact path="/" render={(props) => <GameMatcher {...props} />} />
<Route path="/game/:name" render={(props) => <GameMatcher {...props} />} />