React Button onClick でページをリダイレクト
react-router-dom 関数のおかげで、Web 開発者はマルチページ アプリを作成するときに別のページに移動できるシングル ページ アプリを簡単に作成できます。 しかし、react-router-dom 関数と一緒に onClick 関数を使おうとするとどうなるでしょうか?
onClick 関数は何をしますか
onClick 関数はイベント リスナーです。 その機能は、その要素 (リンクまたはボタン) がクリックされると、onClick 関数がアクティブになり、設計またはプログラムされた機能を実行するように要素にプログラムされます。
たとえば、リンクをクリックすると、そのリンクから別のページに移動したり、ポップアップ メッセージが表示されたりする必要があります。 これは、onClick イベントが実行する機能です。
onClick と React-Router-Dom を組み合わせる方法
React で別のページにリダイレクトする通常の方法は、react-router-dom パッケージを使用することです。 次に、ルートの正確なパスとリンク機能を適用して、コーディング プロセスを完了します。
react-router-dom パッケージで onClick イベント リスナーを使用しようとするときのプロセスは、上記の説明とほとんど同じです。
リダイレクト先の他のページを作成する必要があります。 違いは主にコーディングにあり、onClick はイベント リスナーであり、とりわけポップアップ メッセージの作成に役立つ関数です。
ボタンonClickに反応してページをリダイレクト
すべての React プロジェクトを開始するには、このコードをターミナルに配置して、新しい React アプリを作成することから始めます: npx create-react-app examplefive。 プロジェクト アプリが作成されたら、npm i react-router-dom を使用して react-router-dom パッケージをインストールする必要があります。
次に、テキスト エディターでプロジェクト フォルダーを開き、リダイレクトするページとして機能するファイルをさらに 2つ作成します。 examplefive プロジェクト フォルダーの src フォルダーに移動し、さらに 2つのファイル Home.js と Contact.js を作成します。
この後、以下のように、App.js から始めて、適切なコーディングを行います。
コーディング スニペット App.js:
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Contact from "./Contact";
const App = () => {
return (
<div style={styles.app}>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
</div>
);
};
export default App;
const styles = {
app: {
padding: 50,
},
};
ここでは、ボタンをクリックした後に移動するページを示すコード スニペットを追加します。
この後、Home.js に移動して、さらにコーディングを行います。
コード スニペット Home.js:
import React from "react";
import { useNavigate } from "react-router-dom";
const Home = (props) => {
const navigate = useNavigate();
return (
<>
<h1>Home Page</h1>
<p>Go to the contact page by using one of the following:</p>
<hr />
{/* Button */}
<p>
<button onClick={() => navigate("/contact")}>Go to Contact</button>
</p>
{/* Checkbox */}
<p>
<input
type="checkbox"
onChange={() => navigate("/contact")}
></input>
<span>Check this checkbox to go to the contact page</span>
</p>
{/* Text field */}
<p>
<input
type="text"
onChange={(e) => {
if (e.target.value === "contact") {
navigate("/contact");
}
}}
placeholder="Enter 'contact' to navigate"
></input>
</p>
</>
);
};
export default Home;
メインページであるHome.jsには、ほとんどのコンテンツとコーディングが含まれています。 onClick イベント リスナーが contact ボタンにリンクされていることがわかります。このボタンをクリックすると、連絡先ページに移動します。
コード スニペット Contact.js:
import React from "react";
import { useNavigate } from "react-router-dom";
const Contact = (props) => {
const navigate = useNavigate();
return (
<>
<h1>Contact Page</h1>
<br />
<button onClick={() => navigate(-1)}>Go Back</button>
</>
);
};
export default Contact;
Home.js ファイルと同様に、onClick イベント リスナーを Go Back ボタンにリンクします。 このボタンをクリックすると、ホームページに戻ります。
出力：
まとめ
onClick イベント リスナーは、react-router-dom メソッドのようなマルチページ アプリケーションを作成するために開発できるもう 1つのソリューションです。 ただし、react-router-dom パッケージを使用せずに別のページにリダイレクトする既知の方法はありません。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn