React Router

🍭 spa中切替画面のrouterおよび手軽にスタイリングできるcssフロントプロセッサsassこの本10
SPA
songlepageアプリケーションページが1つしかありません
Routing
異なるパス(URLアドレス)の異なるビュー(画面)を表示(画面切り替え)
ルータは反応器ルーティング機能で最もよく使われるライブラリです.

👾 React Router

react-ルータのインストール

端末にnpm install react-router-dom --save値を入力してインストールする

react router素子

1.ルータコンポーネントの実装

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

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

export default Router;

Router.jsファイルに入れるコード.
まず,登録ウィンドウをホームページにアクセスさせるルーティングを実現した.

2. index.js接続

ReactDOM.render(<Router />, document.getElementById('root'));Router構成部品に設定します.

3.移動Route

移動する方法は2つあります.

Link:to道具.

useNavigate:path道具.

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;

このように会員をクリックして加入すると、サイトに載せるコンセプトになります.Link/素子はaラベルのように指定経路に直接移動する機能を有する.
ただし、両ラベルの違いは、aタグが外部サイトに移行していること、Linkプロジェクト内でページ切り替えが行われていることである.
3-2. useNavigate

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

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

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

  return (
    <div className="login">
      <h1 className="login_logo">Westagram</h1>
      <div className="login_input">
        <input
          type="text"
          className="inputId"
          placeholder="전화번호, 사용자 이름 또는 이메일"
        />
        <input type="password" className="inputPw" placeholder="비밀번호" />
        <button className="login_btn" onClick={goToMain}>
          로그인
        </button>
      </div>
      <div className="forget_pw">
        <a className="forgetPwLink" href="#">
          비밀번호를 잊으셨나요?
        </a>
      </div>
    </div>
  );
};

export default Login;

useNavigate関数呼び出しでページを移動する方法です.goToMainに示すように、useNavigatehookでページを移動する方法もあります.
このように実現すると、ボタンをクリックして関数に戻り、それを対応するページに移動し、その関数をnavigateという変数に格納し、navigateのパラメータとしてRouter.jsで設定したpathを対応するパスに渡す.