[TIL_19] Router

9976 ワード
WeCode React TIL テキストリンク

Router


単一ページアプリケーション(SPA)は、単一ページアプリケーションと呼ばれます.
一つです.すなわち、htmlファイルのみが存在し、複数のページが表示される.
その方法がRoutingです

Routing


ルーティングはurlアドレスによって異なる画面を表示します.
反応自体にこの機能がないからです.
Third-party Library React-routerという名前のライブラリを使用します.

React router

  • 取付方法
    • npm install react-router-dom --save
  • Router素子
    • 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 List from "./pages/Signup/Signup";
import Detail from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/list" element={<List />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;
    このRouter構成部品を次のようにインデックスします.jsに組織を入れます.
    ReactDOM.render(<Router />, document.getElementById('root'));

    ルーティングの移動


    上記設定のpathを利用して、ルートを移動できます.
    1.`構成部品
    import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/list">리스트로 이동</Link>
    </div>
  );
}

export default Login;
    前述したように、素子を用いてpathに移動することができる.
    素子はDOMからaラベルに変換される.
  • userNavigate関数
    • import React from "react";
import { useNavigate } from "react-router-dom";

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

  const goToList = () => {
    navigate("/list");
  };

  return (
    <div>
      <button className="Btn" onClick={goToList}>
        리스트로 이동
      </button>
    </div>
  );
}

export default Login;
    useNavigate関数をnavideという変数に格納して使用します.
    パラメータに移動したいpathを入れると、そのパスに移動できます.

    利用とuseNavigate


  • -
    • を使用して無条件のクリックスルーロジックを実現
  • useNavigate
  • の上では、UserNavigateを使用し、単純な論理で構成されているが、特定の条件下で移動する論理またはページ切り替え時にのみ処理する必要がある論理である.
    • プロジェクタ1回目:2日目
    iOSプッシュ通知（社内勉強会用）