[React] 06. SPAとRouter

💚 SPA(Single Page Application)

単一ページアプリケーション
従来のアプリケーションは複数のページで構成されています.このようなアプリケーションでは,ユーザはページを移動するたびに新しいHTMLを受信する必要がある.Web上で提供される情報が増えるにつれて、上記の方法を使用するとパフォーマンスの問題が発生します.
したがって、리액트などのライブラリを使用してビューをレンダリングし、JavaScriptを使用してユーザーと対話する必要がある部分を更新して、上記の問題を解決することができます.SPAユーザーに提供されるページは1つだけですが、ページにロードされているJavaScriptと現在のユーザーブラウザのアドレスステータスに応じて異なる画面を表示できます.これは라우팅(Routing)と言います.

💚 ルーター(Router)

別のアドレス(url)に別の画面を表示<Router>は、<Switch>および<Route>の共通の親要素である
まず、ルータを使用するアイテムにreact-router-domをインストールします.

npm install react-router-dom --save

++その他のreact-routerとreact-router-domの違い
react-router-dom:Webコンポーネントを含む
react-router-native:react-nativeを使用するアプリケーションコンポーネントを含む
react-router:web/app
まず、<Link>素子と<Route>素子とは何かを整理し、コードに適用しましょう.

💛リンク構成部品

<Link>コンポーネントはHTMLで<a>ラベルに似た機能を持っています!<Link>は、toプロパティを使用して移動するパスを指定できます.

<Link to="/">HOME 페이지로 이동하기</Link>
<Link to="/intro">INTRO 페이지로 이동하기</Link>

💛ルーティング構成部品

<Route>コンポーネントは、通常、現在のURL固有の画面を表示または非表示にするために使用される.

<Route path="/" component={Home} exact={true} />
<Route path="/intro" component={Intro} />

<Route>プロパティを使用して、component要素に画面に表示する要素を指定できます.さらに、urlはpathプロパティに指定することもできます.

また、複数のurlに1つの構成部品を表示したい場合は、配列を使用して設定できます.

<Route component={Intro} path={["/intro", "/info"]} />

次のコードは、<Link>および<Route>を使用して記述されます.)
さらに、<Switch>は、<Route>において条件を満たすルーティングをレンダリングする.

import { BrowserRouter, Link } from "react-router-dom";
import { Route, Switch } from "react-router";
import Home from "./page/Home";
import Intro from "./page/Intro";
import NotFound from "./page/NotFound";

const AppRouter = () => {
return (
  <BrowserRouter>
    <Link to="/">HOME 페이지로 이동하기</Link>
    <br />
    <Link to="/intro">INTRO 페이지로 이동하기</Link>
    <Switch>
      <Route path="/" component={Home} exact={true} />
      <Route path="/intro" component={Intro} />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>
);
};

export default AppRouter;

💚 urlパラメータの使用

データをクエリーまたはリクエストするときにパラメータ値を使用します.<Route>コンポーネントのパラメータを使用して、情報を表示するコードを記述します.
まず,パラメータとしてuserIdを取得し,Profileコンポーネントを作成してユーザの情報を表示した.

  import React from "react";

const users = {
  1: { name: "송우든", description: "Front-end Dev" },
  2: { name: "먹깨비", description: "Back-end Dev" },
};

const Profile = ({ match }) => {
  const { userId } = match.params;

  const user = users[userId];
  return (
    <div>
      <h1> PROFILE PAGE </h1>
      <p>{user.name}입니다!</p>
      <p>{user.description}</p>
    </div>
  );
};

export default Profile;

ここでパラメータを入力する場合は、matchオブジェクトのparamsの値を参照してください.matchオブジェクトには、現在の構成部品がどのようなパス規則に従うかに関する情報が含まれています.
次に、上のAppRouterコンポーネントに次のコードを追加しました.:を指定するパラメータの前に貼り付けます.パラメータとしてuserIdをあげたので、:userIdを追加!

<Route path="/profile/:userId" component={Profile} />

💚 urlクエリーの使用

次に、クエリーの使用方法について説明します.
クエリはlocationオブジェクトの"search"値から読み取ることができます!このlocationオブジェクトには、現在のアプリケーションが所有しているアドレス情報があるという.
🔻 location形態例
"search"の値は文字列形式です.qsライブラリを使用して、クエリー文字列をオブジェクトに変換します.

npm install qs --save  

次に、次のコードを記述できます.adminおよびtrue / falseの値に従って、画面に表示されます.

import React from "react";
import qs from "qs";
 
const ManageUser = ({location}) => {

   const query = qs.parse(location.search, {
       ignoreQueryPrefix: true
   });

   const isAdmin = query.admin === 'true';

   return (
       <div>
           <h1>ADMIN PAGE</h1>
           {isAdmin && <p>관리자 입니다.</p>}
           {!isAdmin && <p>관리자 아닙니다.</p>}
       </div>
   );
};

export default ManageUser;

リファレンスとサイト

ベロフェットとのモダン反応