解決済み: History React Router v6 アプリを使用する

History React Router v6 の使用に関する主な問題は、ハッシュベースのルーティングをサポートしていないことです。 これは、すべての URL が絶対パスでなければならないことを意味し、アプリケーションの管理と保守が困難になる可能性があります。 さらに、動的ルートのサポートが組み込まれていないため、複数のページを持つ複雑なアプリケーションを作成するときに問題になる可能性があります。 最後に、History React Router v6 は、場合によっては必要になるサーバー側のレンダリングをサポートしていません。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// このコードは、react-router-dom ライブラリから BrowserRouter、Switch、Route、および useHistory コンポーネントをインポートします。
// 次に、useHistory フックを使用して履歴オブジェクトを作成する App という関数を作成します。
// この履歴オブジェクトは、呼び出されたときに履歴スタックに新しいエントリをプッシュする handleClick という関数で使用されます。
// App 関数は、クリック時に handleClick を呼び出す onClick ハンドラを持つボタンを含む JSX を返します。
// 最後に、そのパスが「/new-location」と一致する場合に NewLocation コンポーネントをレンダリングする XNUMX つの Route コンポーネントを内部に持つ Switch コンポーネントがあります。

useHistoryとは

useHistory は React Router が提供する React Hook で、プログラムでナビゲートするためにコンポーネントが history オブジェクトにアクセスできるようにします。 新しい場所を履歴スタックにプッシュしたり、現在の場所を置き換えたり、履歴を前後に移動したりするために使用できます。

反応でルート履歴を取得するにはどうすればよいですか

React Router では、useHistory フックを使用してルート履歴を取得できます。 このフックは、ナビゲートしたり、アプリの履歴を前後に移動したりするために使用できる履歴インスタンスへのアクセスを提供します。 これを使用するには、React Router からフックをインポートして、コンポーネントで呼び出します。

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
const 履歴 = useHistory();

// これで、`history` オブジェクトを介してルート履歴にアクセスできます。

戻る （…）;
}

反応ルーターは履歴APIを使用しますか

はい、React Router は HTML5 History API を使用して、現在の場所とその履歴を追跡します。 これにより、React Router はページをリロードせずにページを更新できるため、ナビゲーションがより高速かつスムーズになります。 History API では、ディープ リンクも可能です。これにより、ユーザーは、アプリケーション内の特定のページに直接移動するリンクを簡単に共有できます。

関連記事：

コメント