React(Router)

学習目標

ルータの概念を定義し、aラベル、リンクコンポーネント、userNavigateをどのように実装するかを目標としています.

SPA

SPA(1ページアプリケーション)ページは1つのアプリケーション

以前:Login.html, Main.htmlページ数でhtmlファイル

応答項目:htmlの個数は1個>SPA

Routung:1つのページ(html)内に複数のページを表示する方法

Routing

라우팅(Routing)は、URL(異なるパス)によって表示される異なるビュー(画面)である.

reactionはFrameworkではなくライブラリであるため、これらの機能は含まれていません.

React-routerは、ルーティング機能に応答するために最も一般的なライブラリである.

React Router

Creat Realt App(CRA)はルーティングに特化したロジックを持たないため、ルーティングを実施するために最も人気のある反応ルータを追加する.

react-routerインストール

React素子実装

BrowserRouter、Routes、Route必須構造

使用するには、パスimportを記入する必要があります

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav /> 
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer /> 
    </BrowserRouter>
  );
}

export default Router;

index.js

ReactDOM.render(<Router />, document.getElementById('root'));

CRAが作成したアプリケーションは、index.jsを変更してからルーティング機能を適用する必要があります.

3-1. ルーティングの移動

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

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

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

プロジェクト内でページを切り替える際によく使う

<useNavigate>実現

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

function Login() {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate("/main");
  };

  // 실제 활용 예시
  // const goToMain = () => {
  //   if(response.message === "valid user"){
  //     navigate('/main');
  //   } else {
  //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  //     navigate('/signup');
  //   }
  // }

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

useNavigatehookは、ページの移動を許可する関数を返します.この関数をnavigateという変数に保存します.

の後、navigateのパラメータを使用して、Router.jsに設定されたパスを対応するパスに渡すことができます.

<a>, <Link>, <useNavigate>用法

<a>-外部サイトへの直接移動

<Link>-プロジェクトでページを切り替えた場合:
-クリック時の即時移動を実行するためのロジック
-ex)Nav Bar、Aside Menu、「プロジェクトリスト」ページでプロジェクトをクリックすると->詳細ページ

に移動します.

<useNavigate>-ページ切り替え時に他の処理が必要なロジックがある場合は、
-ex)Backend APIへのデータ転送
-ユーザーデータ検証/認証
- response message
-ケース1:登録済みメンバーに移動>ホームページ
-Case 2:非会員ユーザーへ移動>Signupページ