Usehistoryを使用して、ルート間でプログラムでどのようにナビゲートしますか？-フロントエンドQ&A-php.cn

Usehistoryを使用して、ルート間でプログラムでどのようにナビゲートしますか？

ReactルーターのuseHistoryを使用してルート間でプログラム的にナビゲートするには、最初にreact-router-domライブラリからフックをインポートしてから、コンポーネント内で使用する必要があります。 NavigationにuseHistory使用する方法に関する段階的なガイドを次に示します。

Import useHistory ：コンポーネントファイルの先頭にあるreact-router-domパッケージからuseHistoryインポートすることから始めます。
```
 <code class="javascript">import { useHistory } from 'react-router-dom';</code>
```
ログイン後にコピー
初期化useHistory ：機能コンポーネント内で、 useHistoryを呼び出して履歴オブジェクトを取得します。
```
 <code class="javascript">const history = useHistory();</code>
```
ログイン後にコピー
push方法でナビゲート：履歴オブジェクトのpushメソッドを使用して、新しいルートに移動します。たとえば、 /aboutに移動するには、次のことを行います。
```
 <code class="javascript">history.push('/about');</code>
```
ログイン後にコピー
現在のエントリをreplace方法で置き換える方法：新しいルートに移動するが、履歴スタックの現在のエントリを交換する場合（バックボタンが前のページに戻らない）、代わりにreplace方法を使用します。
```
 <code class="javascript">history.replace('/about');</code>
```
ログイン後にコピー
前方に進みます： goBack 、 goForward 、およびgo Methodを使用して、履歴スタックの特定のポイントに戻る、前方に移動することもできます。
```
 <code class="javascript">history.goBack(); // Go back to the previous page history.goForward(); // Go forward to the next page history.go(-2); // Go back two entries in the history stack</code>
```
ログイン後にコピー

この方法でuseHistory使用すると、Reactアプリケーション内でプログラムでナビゲーションを制御できます。

NavigationにUsehistoryを使用する際に避けるべき一般的な落とし穴は何ですか？

useHistoryはReactのプログラムナビゲーションのための強力なツールですが、注意すべき一般的な落とし穴がいくつかあります。

時代遅れの使用：React Router V6の時点で、 useHistory非推奨になり、 useNavigateに置き換えられています。 Reactルーターの新しいバージョンでuseHistory使用すると、エラーが発生します。使用しているReactルーターのバージョンを常に確認し、適切なフックを使用してください。
直接ナビゲーションの過剰使用：ナビゲーションのためにuseHistoryに依存しすぎると、アプリケーションのルーティング構造の設計の選択が不十分であることを示している可能性があります。可能であれば、 LinkとNavLinkコンポーネントを使用して宣言的なルーティングを使用して、ナビゲーションを簡単に保守可能に保ちます。
エラー処理の欠如：プログラムで、特に動的ルートに移動する場合、潜在的なエラー（例えば、存在しないルートに移動する）を処理しないと、アプリケーションが予期せずに壊れる可能性があります。エラー境界またはルートレベルのエラー処理を実装します。
国家管理の混乱：NavigationにuseHistory使用し、それを介して状態を管理しようとすると、混乱につながる可能性があります。アプリケーションにおけるナビゲーション履歴と国家管理の分離を理解してください。状態については、Context、Redux、MobxなどのReactの状態管理ソリューションを使用することを検討してください。
replaceの誤用： replace不必要に使用すると、ユーザーが戻るボタンを使用して以前に訪れたページに移動し、潜在的に混乱する可能性があります。具体的な理由がある場合にのみreplace使用してください。

Usehistoryでルート間で状態を渡す方法を説明できますか？

useHistoryを使用してルート間を通過することは、 stateプロパティを使用してオブジェクトをpushまたはreplace方法に渡すことで実現できます。これがあなたがそれを行う方法です：

通過状態：新しいルートに移動するときは、状態オブジェクトを含めることができます。例えば：
```
 <code class="javascript">const history = useHistory(); history.push({ pathname: '/profile', state: { id: 123, name: 'John Doe' } });</code>
```
ログイン後にコピー

状態へのアクセス： /profileルートでレンダリングされたコンポーネントでは、 react-router-domからのuseLocationを使用して状態にアクセスできます。

 <code class="javascript">import { useLocation } from 'react-router-dom'; function Profile() { const location = useLocation(); const { id, name } = location.state || {}; return ( <div> <h1>Profile</h1> <p>ID: {id}</p> <p>Name: {name}</p> </div> ); }</code>

ログイン後にコピー

不足している状態の処理：ターゲットルートで状態にアクセスするときは、状態が定義されているかどうかを常に確認して、状態を設定するナビゲーションを通過せずにユーザーがURLに直接アクセスするケースを処理します。

これらの手順に従うことにより、 useHistoryを使用してルート間をナビゲートするときに、状態を効果的に通過および利用できます。

UseNavigateのような他のナビゲーションフックとusehistoryはどのように異なりますか？

useHistoryとuseNavigateどちらもプログラムナビゲーションを可能にするReactルーターのフックですが、それらはライブラリの異なるバージョンに属し、いくつかの重要な違いがあります。

バージョンの互換性：
- useHistory React Router V5からのものであり、React Router V6でuseNavigateを支持して非推奨されています。
- useNavigate ReactルーターV6のプログラムナビゲーションの現在の推奨フックです。
構文と使用法：
- useHistory使用すると、通常、 push 、 replace 、 goBack 、 goForward 、 goなどの方法を使用します。
- useNavigate使用すると、フックは、同じ結果を達成するためにパスとオプションで呼び出す関数（ navigate ）を返します。たとえば、 navigate('/about')またはnavigate('/about', { replace: true }) 。
通過状態：
- useHistoryでは、オブジェクトを渡して、 stateプロパティをpushたりreplace 。
- useNavigate使用すると、 navigateを呼び出すときにオプションとしてstateオブジェクトを渡すことができます。
```
 <code class="javascript">// useHistory history.push({ pathname: '/profile', state: { id: 123 } }); // useNavigate navigate('/profile', { state: { id: 123 } });</code>
```
ログイン後にコピー
相対ナビゲーション：
- useNavigate 、相対パスナビゲーションをサポートし、兄弟または親ルートを使用してuseHistoryゲートすることができます..
前後のナビゲーション：
- useHistory 、 goBackやgoForwardなどの方法を直接提供します。
- useNavigate使用すると、バック用にnavigate(-1)を呼び出し、前方にnavigate(1)ことで同じ効果を達成できます。