SPA(Single Page Application)

ページ切り替え

react-router-domを使用してクライアント側ルーティングを試みます.
ページが切り替え不可能な単一ページアプリケーションであっても、アドレスウィンドウが変換されていることがわかります.

なぜスパを使うのですか？

名前の通り、1ページしかないアプリケーションを意味します.
従来のWebアプリケーション構造は、複数のページから構成されています.ユーザーはページを要求するたびにリフレッシュし、ページをロードするたびにサーバからリソースを受信して解析とレンダリングを行います.サーバは、HTMLファイルまたはテンプレートエンジンを使用してアプリケーションビューを表示する方法を担当します.
<質問>
現在、Web上で提供されている情報は非常に多いため、速度の面でいくつかの問題があり、キャッシュと圧縮によってこれらの問題を解決することは、ユーザーとインタラクションの多い現代のWebアプリケーションでは十分ではない可能性があります.サーバ側はレンダリングを担当します.これは、サーバリソースがレンダリングに使用され、不要な通信も浪費されることを意味します.
<ソリューション>
[再生](Playback)などのライブラリやフレームワークを使用して、ユーザーのブラウザにビューのレンダリングを担当させ、まずアプリケーションをブラウザにロードし、本当に必要なデータだけを受信します.
1ページに1つの画面しかないわけではありません.
たとえば、ブログを作成した場合、文章のリスト、文章、文章などの画面がある場合は、画面に基づいてアドレスを作成する必要があります.アドレスがあってこそ、ユーザーがブックマークをすることができ、グーグルを通じてサービスに入ることもできるからだ.
異なるアドレスに基づいて異なるビューを表示することをルーティング選択と呼ぶ.
リトラクト自体にはこの機能は含まれていません.
したがって、ブラウザのAPIを使用してステータスを設定して、異なるビューを表示する必要があります.
react-routerはサードパーティ製ライブラリです.式ではありませんが(フェイスブック式ルーティングライブラリは存在しません).最も一般的なリポジトリ.このライブラリはクライアントのルーティングを簡素化します.さらに、サーバサイトのレンダリングを支援するツールもそろっています.
また、このルータはreact-ネイティブにも使用できます.
複数の画面からなるWebアプリケーションを作成する場合は、react-routerが必要なライブラリです.
*SPAのデメリット
アプリケーションの規模が大きいほど、JavaScriptファイルのサイズが大きくなります.
これは、ユーザーが実際にアクセスしない可能性のあるページに関連付けられたスクリプトもロードされるためです.

react-router-domの使用

応答-router-domインストール

npm install react-router-dom

yarn add react-router-dom

SignUp.js

import React from "react";
import { Link } from "react-router-dom";
const SignUp = () => {
   return (
      <div className="body">
         <div className="stage">
            <div>
               계정이 있으신가요? <Link to="/">로그인</Link>
            </div>
         </div>
      </div>
   );
};

export default SignUp;

SignUp.js

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

const SignIn = () => {
   return (
      <div className="body">
         <div className="stage">
            <div>
               Don't have an account?
               <Link to="/SignUp">Sign up</Link>
            </div>
         </div>
      </div>
   );
};

export default SignIn;

App.js

import React from "react";
import SignUp from "./components/SignUp";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import SignIn from "./components/SignIn";
function App() {
   return (
      <Router>
         <Switch>
            <Route exact={true} path="/">
               <SignIn />
            </Route>

            <Route path="/SignUp">
               <SignUp />
            </Route>
         </Switch>
      </Router>
   );
}

export default App;

実装画面

注)https://velopert.com/3417