[React] React Router

SPA

Single Page Application 페이지가 한 개인 어플리케이션

React-router

리액트의 라우팅 기능을 위해 사용되는 라이브러리
Routing 다른 경로에 따라 다른 view를 보여주는 것.

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

import Login from './pages/Login/Login'; 
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render(){
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

• Route exact path: 라우터에서 내가 지정해준 경로

Route 이동하기

• <Link to="/main"></Link> DOM에서 a태그로 변환된다.
  -> 클릭 시 바로 이동하는 로직 구현 시 사용한다. ex) Nav Bar, Aside Menu
• withRouterHOC
  -> 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용한다. ex) 로그인 버튼 시 인증/인가, API로 데이터 전송

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

class Loging extends React.Component {
  goToMain = () => {
    this.props.history.push('/main');
  }
  render(){
    return (
      <button onClick={this.goToMain}>로그인</button>
)
}
}
export default withRouter(Login);

Sass

• Nesting 기능