React Router v6でuseNavigate Hookを使う
React Routerでプログラム的にナビゲートする方法
このチュートリアルでは、React Routerを使用してプログラム的にナビゲートする方法についていくつかの方法を紹介します。
useNavigate Hookを使う
React Router v6では、useNavigate Hookを使用してプログラム的にナビゲートできます。これは、関数コンポーネントでナビゲーションロジックを簡単に実装できる便利な方法です。
import { useNavigate } from "react-router-dom";
const MyComponent = () => {
const navigate = useNavigate();
const handleClick = () => {
navigate("/about");
};
return (
<div>
<button onClick={handleClick}>Aboutページへ移動</button>
</div>
);
};
上記のコードでは、useNavigate Hookを使用して navigate 関数を取得しています。この関数は、引数として渡されたパスにナビゲートするために使用できます。
history オブジェクトを使う
React Router v5以前では、history オブジェクトを使用してプログラム的にナビゲートできました。このオブジェクトは、react-router-dom パッケージからインポートできます。
import { history } from "react-router-dom";
const handleClick = () => {
history.push("/about");
};
<button onClick={handleClick}>Aboutページへ移動</button>
上記のコードでは、history オブジェクトの push メソッドを使用して /about パスにナビゲートしています。
Link コンポーネントは、ユーザーがクリックしたときにプログラム的にナビゲートするリンクを作成するために使用できます。
import { Link } from "react-router-dom";
<Link to="/about">Aboutページへ移動</Link>
上記のコードでは、Link コンポーネントを使用して /about パスへのリンクを作成しています。ユーザーがこのリンクをクリックすると、そのページに移動します。
React Routerを使用してプログラム的にナビゲートするには、useNavigate Hook、history オブジェクト、または Link コンポーネントを使用できます。これらの方法のどれを選択するかは、アプリケーションの要件によって異なります。
useNavigate Hookを使う
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const App = () => {
const [count, setCount] = useState(0);
const navigate = useNavigate();
const handleClick = () => {
setCount(count + 1);
navigate(`/about/${count}`);
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={handleClick}>Aboutページへ移動</button>
</div>
);
};
export default App;
history オブジェクトを使う
import React, { useState } from "react";
import { history } from "react-router-dom";
const App = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
history.push(`/about/${count}`);
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={handleClick}>Aboutページへ移動</button>
</div>
);
};
export default App;
Link コンポーネントを使う
import React, { useState } from "react";
import { Link } from "react-router-dom";
const App = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<h1>カウント: {count}</h1>
<Link to={`/about/${count}`}>Aboutページへ移動</Link>
<button onClick={handleClick}>カウントを増やす</button>
</div>
);
};
export default App;
React Routerでプログラム的にナビゲートするその他の方法
useLocation Hookを使用して、現在のURLを取得できます。この情報を使用して、条件付きでナビゲートしたり、現在のページに関する情報を表示したりできます。
import { useLocation } from "react-router-dom";
const MyComponent = () => {
const location = useLocation();
useEffect(() => {
console.log(location.pathname); // 現在のパスを出力
}, [location]);
return (
<div>
<h1>現在のページ: {location.pathname}</h1>
</div>
);
};
match オブジェクトは、ルートコンポーネントに渡されます。このオブジェクトを使用して、現在のパスと一致するルートのパラメータを取得できます。
const MyComponent = ({ match }) => {
console.log(match.params.id); // URLパラメータを取得
return (
<div>
<h1>ID: {match.params.id}</h1>
</div>
);
};
Redirect コンポーネントを使用して、ユーザーを別のページにリダイレクトできます。
import { Redirect } from "react-router-dom";
const MyComponent = () => {
return <Redirect to="/about" />;
};
これらの方法は、React Routerでプログラム的にナビゲートする際に役立ちます。どの方法を選択するかは、アプリケーションの要件によって異なります。
javascript reactjs react-router
