outer

10436 ワード
withRouterHOC link React テキストリンク

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);
    モジュール反応コンポーネントライブラリを構築する方法
    React, code refactoring