react-router(v6)

!!! 本稿はreact-router v 6の位置決めである.
Rounting
ルーティングは、異なるパス(url)に基づいて異なる画面を表示します.
しかし、反応器はフレームワーク(Angular.jsなど...)これとは異なり、SPAに対して最小限の機能を提供するUIライブラリです.
従って、反応器自体はルーティングに関連する機能を提供しない.
react-router
上記のため、応答でルーティングを使用するには、サードパーティ製ライブラリをインストールする必要があります.react-routerは最も一般的な反応器のルーティングソリューションになるだろう.
react-ルータのインストール
パッケージマネージャ(npmまたはyarnなど)を使用して、react-routerを簡単にインストールできます.

npm install react-router-dom --save

yarn add react-router-dom

Router構成部品の実装
react-routerを使用すると、Router構成部品は次の機能を実現できます.
Router.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Login from './Login';
import Main from './Main';
import ProductList from './List';

const Router = () => {
  return (
    <BrowserRouter>
      <div className="appContents">
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/login" element={<Login />} />
          <Route path="/list" element={<List />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default Router;

!!! react-router v6에서는 Switch 대신 Routes를 사용하며,
component에서 element로 바뀌어 props를 내려주기 더욱 편해졌다.

LinkとuseNavigate
指定したルーティングに移動するには、2つの方法があります.
リンク構成部品とuseNavigate Hook
リンク構成部品の使用

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

const Main = () => {
  return (
    <div className="main">
      <Link to="/login">회원가입</Link>
    </div>
  )
}

export default Login;

リンク構成部品は、記録されたパスに移動するためにハイパーリンクを掛けます.
リンクはBabelでコンパイルされるとaラベルに変換されます.
useNavigate

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

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

  const goToMain = () => {
    if (!조건){
    	window.alert('조건에 맞지 않습니다!')
    } else {
      navigate("/main");
    }
  };

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

export default Login;

条件に従って通過する必要がある場合はuseravigate hookを使用します.
useNavigateを使用すると、onClickと組み合わせて論理を混合できます.