反応ルータV 6による文脈モーダルナビゲーションの生成

私は現在、REACTJSを使用してサイドプロジェクトを作成しています.私はTwitterやFacebook、Trelloのような様々な既存の人気のウェブサイトからインスピレーションを取ってきた.「プロファイルを編集」ボタンをクリックすると、ポップアップウィンドウが開き、URLが変更されます.しかし、前のページはバックグラウンドで残っています.ポップアップを閉じた後、それは前のページに戻ります.

どうしたらいいのかわからなかった.私はGoogleでそれを捜しました、しかし、私は若干の古いチュートリアルを見つけました.注:私は反応ルータv 6を使用しています.ついに、私はそれをしました.さあ、どうやってやったか教えてあげよう.

始めましょう

まず最初に、反応アプリを作成し、反応ルータDOMをインストールします.

npx create-react-app my-app
cd my-app

npm i react-router-dom

すべてのテストファイルを削除しました.必要に応じてそれらを保つことができます.フォルダを作成します.ここでは、私たちのホームページとモデルを置きます.ファイル名Modal.js and Main.js 「コンポーネント」フォルダの内部.Main.js ホームページです.

メイン.js

import { Link, useLocation } from "react-router-dom";

export const Main = () => {
  const location = useLocation();
  return (
    <div>
      <h2>Create contextual modal navigation</h2>
      <Link to="/modal" state={{ background: location }}>
        Open Modal
      </Link>
    </div>
  );
};

Main.js は、矢印の機能的なコンポーネントです.ここに2つの要素があります<h2/> and <Link /> . 注意:<Link /> 要素には、追加の状態属性が含まれます.オブジェクトが含まれます.我々は、キーと場所の値としての背景を通過します.我々は将来このオブジェクトを使用します.

モーダルjs

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

export const Modal = () => {
  const navigate = useNavigate();
  return (
    <div className="modalDiv">
      <div className="modal">
        <h3>Modal</h3>
        <button onClick={() => navigate(-1)}>Close</button>
      </div>
    </div>
  );
};

アプリ。CSS

.App {
  text-align: center;
}

.modalDiv {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: rgba(91, 112, 131, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  width: 350px;
  height: 200px;
  background-color: white;
  border-radius: 5px;
}

インデックス.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <App />
  </Router>
);

我々はラップした<App /> with <Router /> インサイドIndex.js ファイルを置く代わりにApp.js ファイル.これは、我々は、アプリケーションで反応ルータで使用されるUSELocationフックを使用するためです.jsファイル.我々は、反応ルータによって使用されるどんなフックも外に置くのを許されません<Router /> .

アプリ。js

import "./App.css";
import { Route, Routes, useLocation } from "react-router-dom";
import { Main } from "./components/Main";
import { Modal } from "./components/Modal";
function App() {
  const location = useLocation();
  const background = location.state && location.state.background;

  return (
    <div className="App">
      <Routes location={background || location}>
        <Route path="/" element={<Main />}>
          <Route path="modal" element={<Modal />} />
        </Route>
      </Routes>
      {background && (
        <Routes>
          <Route path="modal" element={<Modal />} />
        </Routes>
      )}
    </div>
  );
}

export default App;

オープンモーダルをクリックしてモーダルを開くと、バックグラウンドで空白のページのみを表示する必要はありません.前のページの上にモーダルを表示したい.
それで、我々は前の位置物を<Routes /> 現在の位置オブジェクトを既定で使用する代わりに.こうして<Routes /> 我々が同じページ(前の場所)にいると思います.例えば、我々はホームページにありますhttp://localhost:3000/ . リンクをクリックしてモーダルを開くとhttps://localhost:3000/modal でも<Routes /> 位置が変わったことがないと思います.
覚えてる?我々は、1980年代に州の特質を通過しましたmain.js ファイルには、背景オブジェクトがあります.バックグラウンドオブジェクトがある場合、モーダルを開くためにリンクをクリックすると、モデルは条件付きで2番目に示されます<Routes /> コンテナは、ホームページが最初にバックグラウンドとして表示されます<Routes /> コンテナ.
しかし、あなたが直接モーダルページを訪問するとき、我々が第1の容器でモーダルルートを加えたけれども、我々はホームページだけを見ます.モデルパスまたは他のコンポーネントを/モデルパスに表示するには、<Outlet /> への要素Main.js ファイル.このデモでは、モデルを表示します.

メイン.js

を追加する

import { Link, Outlet, useLocation } from "react-router-dom";

export const Main = () => {
  const location = useLocation();
  return (
    <div>
      <h2>Create contextual modal navigation</h2>
      <Link to="modal" state={{ background: location }}>
        Open Modal
      </Link>
      // Here is the <Outlet/>
      <Outlet />
    </div>
  );
};

私は、私がこれを説明することができたことを望みます.あなたがこのブログについてのどんな質問または提案もするならば、私に連絡してください.

ライブデモ.

Githubのソースコード

参考文献

Official React Router modal example
Building a modal module for React with React-Router V5 by Doğacan Bilgili