outer

React Router

反応器は単一ページアプリケーション(SPA)構造を用いるためindexである.htmlは1つしか存在せず、パスに従ってページ切り替えが必要です.

Routing

ルーティング(Routing)は、異なるパス(url)に基づいて異なるビューを表示します.応答自体に機能がないため、最大React-routerが使用されます.

React Router

最も人気のあるルーティングソリューションreact-routerの構成

応答-ルータインストール

npm install react-router-dom --save

実施

ルータコンポーネント

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

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

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

export default Routes;

index.js

ReactDOM.render(<Routes />, document.getElementById('root'));

ルーティングの移動

ルーティングにはリンクとwithRouterHOCの2つの方法があります.

Linkreactは、外部ページにジャンプする際に<a>タグを使用し、項目内でページ切り替えを行う場合に<Link>を使用する.

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

withRouterHOC
ページ切り替え時に、さらに処理する必要があるロジックがある場合は、このロジックを使用します.

使用する場合

ログインボタン

をクリックします.
ユーザ情報は

Backend API

に送信される

ユーザデータ認証/承認

reponse message
ケース1:登録したメンバーを移動するユーザー->Mainページ
Case 2:非会員ユーザーに移動->Signupページ

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }

  // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);