React Router

反応器は単ページアプリ(SPA)を採用している.
従来のMPAが新しいページをロードする方法とは異なり、複数のページを使用して、新しいページをロードせずに1つのページに必要なデータだけをインポートします.
たとえば、ユーザーがページを移動すると、ページは再ロードされず、必要なデータだけがロードされてレンダリングされます.
この方法を使用するには、ライブラリを使用してページをレンダリングする必要があります.
ただし、反応器には正式にサポートされているルータ機能がないため、ライブラリをインストールする必要があります.
ルーティングライブラリはいろいろありますが、最もポピュラーなReact Routerを使用しています

React Routerのインストール

npm install react-router-dom

npmを使用してライブラリまたは

yarn add react-router-dom

yarmを使用してライブラリをインストールします.
インストールが完了すると、インストールされたライブラリバージョンのpackageを表示できます.jsonファイルを開き、"react-touter-dom"がインストールされていることを確認します.

ルーティング構成部品の実装

ページ上の移動するjsページで
応答ルータは、インポートしたライブラリをインストールして適用する必要があります.

次の文を追加して、リアクションルータを読み込みます.

BrowserRouter:HTML 5のHistory APIでは、ページをリフレッシュせずにアドレスを変更できます.
つまり、ページの変更によって再ロード(点滅)は発生しません.
ここで使用する場合は、BrowserRouterの名前をRouterに変更します.(名前の変更は省略可能)

Switch:これらの構成部品に一致する最初のルーティングのみを表示し、残りのルーティングは表示しません.

Route:Routeを使用してパスを設定します.

これら3つはすべてreact-router-domライブラリから来ています.

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";
import "./styles/Reset.css";

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;

1(反応経路):<Router>のコードを起動する
(このコードはReact-Resourceで名前<Router>が変更されていることに注意してください)<Router>コードにページを移動するコンポーネントを追加すればよい.

2(スイッチ):最初の一致するルーティングのみが表示され、残りのルーティングは表示されません.(1つだけ表示されます)スイッチを使わないと、素子が繰り返し使用される可能性があります.

3(Route):Routeを使用して構成部品を指定します.

4(except):設定した構成部品を表示するには、指定したパスと完全に一致する必要があります.最初のルーティング/の場合、ログインアドレスを表示するには、「/」と完全に同じアドレスでなければなりません.

5(path):パスをpath値に設定します.
変更する住所を書きます.

6:2番と4番を使用しない場合、登録ホームページのパス/は/mainにも/があるので、同時にマッチングすることができます.

index.変更

作成したファイルに基づいてインデックスを作成します.jsを変更します.

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

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

ルーティングの移動

Route移動の方法はいろいろありますが、2つだけ書きたいです.

1.<Link>構成部品の使用方法

import React from "react";
import "./Login.scss";
import { Link } from "react-router-dom";

class Login extends React.Component {
  render() {
    return (
      <div className="login">
        <main>
		.............
          </div>
          <div className="sign-up-box">
            <div>
              계정이 없으신가요? <Link to="/signup">회원가입</Link>
            </div>
          </div>
        </main>
      </div>
    );
  }
}

export default Login;

react-router-domによって提供される<Link>要素は、DOMによって<a>に変換される.
以前はHTMLの他のページを移動する際にラベルを与えて<a href="localhost:3000/">で移動していましたが、同様に反応もaリンクで移動できます.しかし、そうであれば、使用反応の趣旨から少し外れていると言える.ページはスパではなくなっています.
反応物は、aリンクの代わりに<Link>によって使用されると考えられる.<Link to="/main"></Link>リンクをクリックすると、ルーティングコンポーネントのパスが「/main」に一致し、コンポーネント={Main}に移動します.

2.withRouterHOCの実装方法

import React from "react";
import "./Login.scss";
import { Link, withRouter } from "react-router-dom";

class Login extends React.Component {
  goToMain = () => {
    this.props.history.push("/main");
  };

  render() {
    return (
      <div className="login">
        <main>
          <div className="login-box">
          ......
            </form>
            <button
              onClick={this.goToMain}
              type="button"
              id="login-button"
              value="0"
       
              .........
        </main>
      </div>
    );
  }
}

export default withRouter(Login);

<Link />とは異なり、要素上でonClickイベントを介してページを移動する方法もある.goToMainというイベントハンドラで実現されるように、propsオブジェクトの履歴にアクセスして移動することができる.
受信したhistoryのpushメソッドのパラメータで、Routes.jsに設定されたpathをこのルーティングに渡し、そのルーティングに移動することができる.
「Login構成部品」からpropsのルーティング情報を受信する場合(history)、  withRouterで包みます.

活用方法

いつどんな方法を使えばいいですか?
1.<Link>:クリック時に直接移動する論理実装時に使用する.
ex)簡単な<a>リンク、Nav Bar、Aside Menu、アイテムリストページでアイテムをクリックした場合>詳細ページに移動
2.withRouterHOC:ページ切り替え時に、さらなる処理が必要な論理がある場合は、withrouterhocメソッドを使用して実現する.
ex)ログインボタンをクリックし、Backend APIにデータを転送し、ユーザーデータ検証/承認
反応ルータ公式ホームページ:https://reactrouter.com/web/guides/quick-start