React Router

reactは、1ページのアプリケーション(SPA)で新しいページをロードせず、1ページから必要なデータだけを取得する形式です.
React-Routerは、ページを再ロードするのではなく、選択したデータを1ページでレンダリングするためのルーティングパッケージです.

ルーティングは、あるネットワーク内で通信データを送信する際に最適なパスを選択するプロセスである.最適なパスは、所与のデータを最短距離または最短時間で伝送するパスである.ウィキペディア

React Routerは構成部品のセットです.
React Routerを使用すると、1ページのアプリケーションを使用するように、ページを点滅させることなくアドレスを取得できます.
reactはviewのみを担当するライブラリです.したがって,ルーティングを担当するreact-routerを別途インストールする必要がある.

例

react-routerを使用してページを簡単に作成します.

1.反応項目目次を作成します。

npx create-react-app [프로젝트 이름]

2.プロジェクトディレクトリに入り、ルータをインストールします。

yarn add react-router-dom

3.必要なファイルを追加します。

ページに表示されるタイトル部分とルータ部分を分けて、それぞれの機能を発揮させます.

4.React-Router以前のコード

// Components/Header.js
import React from "react";

export default () => (
  <header>
    <ul>
      <li>
        Kimchi
      </li>
      <li>
        Pizza
      </li>
      <li>
        Tomato
      </li>
    </ul>
  </header>
);

// Router/Kimchi.js
export default () => "Kimchi";

// Router/Pizza.js
export default () => "Pizza";

// Router/Tomato.js
export default () => "Tomato";

//Components/App.js
import React from "react";
import Header from "./Header";
import Kimchi from "../Router/Kimchi";
import Tomato from "../Router/Tomato";
import Pizza from "../Router/Pizza";

function App() {
  return (
    <div>
      <h2>React Router!</h2>
      <Header />
      <Kimchi />
      <Tomato />
      <Pizza />
    </div>
  );
}

export default App;

5.React Routerの適用

5-1. Router.jsを作成します(個別のファイルを作成する必要はありません。マージで作成することもできます)。

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import Kimchi from "../Router/Kimchi";
import Tomato from "../Router/Tomato";
import Pizza from "../Router/Pizza";
import Header from "./Header";

export default () => (
  <Router>
    <Header />
    <Route path="/" exact component={Kimchi} />
    <Route path="/Pizza" exact component={Pizza} />
    <Route path="/Tomato" exact component={Tomato} />
  </Router>
);

HashRouter、Router、Routeをインポートします.
ここにHeaderを追加した理由は後述する.
Route

Route構成部品を使用して、ルールのあるパスに表示される構成部品を定義します.

<Route path ="주소 규칙" component={보여줄 컴포넌트} />

の対応するアドレスが受信された場合、component=で指定された構成部品が表示されます.

ラインに取り付けられたexactは、設定された要素を表示するために、所与の経路と完全に一致しなければならない.ピザにしてもトマトにしても、"/"に"/ピザ"を付けても"/"のキムチに相当します.Js一緒に呼んでくれ

5-2. Header.jsの変更(リンク先)

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

export default () => (
  <header>
    <ul>
      <li>
        <Link to="/">Kimchi</Link>
      </li>
      <li>
        <Link to="/pizza">Pizza</Link>
      </li>
      <li>
        <Link to="/tomato">Tomato</Link>
      </li>
    </ul>
  </header>
);

React Routerを使用する場合は、タグを使用せずにLinkという素子を使用します.
aラベルの基本プロパティは、ページを移動しながらページを再ロードすることです.これにより、reactアプリケーションが持つ状態も初期化され、レンダリングされたコンポーネントもすべて消えて再レンダリングされます.
したがって、リンクコンポーネントを使用して、HTML 5 History APIのみを使用してブラウザのアドレスを変更し、ページを再ロードしません.

5-3. App.変更

import React from "react";
import Router from "./Router";

function App() {
  return (
    <div>
      <h2>React Router!</h2>
      <Router />
    </div>
  );
}

export default App;

App.jsでのHeaderはRouterjsに移った理由はHeaderjsのリンクのためです.
リンクを直接使用すると、Routerでエラーが発生する可能性があります.

実は私はまだ完全に理解していません.
上記のエラーが発生したため、最初はRouterでLinkを単独で包んでみました.

その結果、上記のエラーが発生しました.単独でかばうのは問題だと思うjsの中で最も外側にルータがパンされていて、これも同じエラーが発生しました.
ここにヘッドの位置を追加するRouterjsのルータに置いて、正常に動作します.
推測するとRouterは一度だけ発表する必要がありますか?しかし、まだ正確な答えは見つかっていない.

urlが変更されるにつれて、ページ上でレンダリングされるコンポーネントも変更されることがわかります.

Reference

https://m.blog.naver.com/sejun3278/221797203201/
https://www.zerocho.com/category/React/post/57a71751c90c5815005babc4/
レコーダなし
https://velog.io/@bigbrothershin/React-Router/
https://velog.io/@ki_blank/React-Router-1.-8njzuummrs/
https://reactrouter.com/web/guides/quick-start/
https://velog.io/@bigbrothershin/React-Router/