이슈 13 electron react-router-dom (별로 특별할 것 없음), HashRouter BrowserRouter 차이

user 페이지와 별개로, admin 페이지를 넣기 위해 react-router-dom을 사용하기로 했습니다. 먼저 프로젝트에 react-router-dom을 추가합니다.

npm install react-router-dom

# or

yarn add react-router-dom

user.js 파일과 admin.js 파일을 만든 뒤, 기존의 App 클래스의 이름을 User로 변경하여 user.js로 옮깁니다. App.js에는 다음과 같은 코드를 추가합니다. path 앞에 콜론(:)을 붙여, 변수로 넘길 수 있습니다.

import React, { Component } from 'react'
import { HashRouter as Router, Route, Redirect } from 'react-router-dom'
/* User, Admin from custom module */

export default class App extends Component {
  render() {
    return (
      <Router>
        <Redirect from="/" to="/user/4" /> {/* 이렇게 사용할 수 있습니다. */}
        <Route path="/user/:floor" component={User} /> {/* 필드 명은 floor입니다. */}
        <Route path="/admin" component={Admin} />
      </Router>
    )
  }
}

User에서는 아래와 같은 방식으로 해당 변수를 받습니다.

import React, { Component } from 'react'
/* Reserve, Modify, End from custom module */

export default class User extends Component {
    render () {
    const {
      floor,
    } = this.props.match.params

    return (
      <div>
        <Reserve floor={floor} />
        <Modify floor={floor} />
        <End floor={floor} />
      </div>
    )
  }
}

링크를 통해 다른 페이지로 이동할 수 있습니다.

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
/* Reserve, Modify, End from custom module */

export default class User extends Component {
    render () {
    const {
      floor,
    } = this.props.match.params

    return (
      <div>
                <Link to="/admin">Admin</Link>
        <Reserve floor={floor} />
        <Modify floor={floor} />
        <End floor={floor} />
      </div>
    )
  }
}

HashRouter vs BrowserRouter

HashRouter와 BrowserRouter는 모두 React Router ver. 4부터 Router의 서브 클래스로 도입된 컴포넌트입니다.

HashRouter의 주소 체계는 location.hash에 대응되며, www.domain.com/#/user/4와 같은 식입니다. 서버는 이를 www.domain.com에 대한 요청으로 받아들입니다. 때문에 서버는 # 이전까지인 www.domain.com에 대한 응답을 돌려줍니다. 이런 작동 방식으로 인해 HashRouter는 백엔드가 필요하지 않은 상황에 주로 사용합니다.

몇몇 상황에서 HashRouter는 문제를 일으킬 수 있는데, 대표적인 예가 다른 페이지를 링크할 때 입니다. 링크 경로가 클라이언트 react 앱에는 있지만 서버에는 없을 때, HashRouter는 404 not found error를 띄웁니다. 그래서 위와 같이 코드를 작성하고 나서 user.js를 수정하게 되면 react가 reload 되며 404 에러가 발생할 수 있습니다.

BrowserRouter를 통해 접속한 페이지는 location.pathname을 이용해 값을 얻을 수 있으며, www.domain.com/user/4와 같은 식입니다. 서버에서도 똑같이 www.domain.com/user/4로 받아들이며, 이에 따른 응답을 줍니다. 또한 이 방식은 브라우저가 제공하는 history API를 사용할 수 있습니다.

하지만 react를 node.js가 아닌 Apache 등에서 돌릴 경우 (왜 이런 짓을..) 404 에러가 발생하는 때가 있으며, 이를 해걸하기 위해 .htaccess 파일을 구성해야 한다고 합니다.

https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter

HashRouter vs BrowserRouter

https://developer.mozilla.org/en-US/docs/Web/API/History_API

History API