reactjs - React Router v6 における古い CreateBrowserHistory() 関数の代替

私はアプリの履歴に新しいルートをプッシュしたいのですが、ご存知の通り、UseHistory() フックと CreateBrowserHistory() 関数（ユーザー定義の履歴を作成するためのもの）はバージョン6の新しいバージョンから削除されました。UseNavigate フックを使用して Navigate() 関数でこの作業を行うことができることは知っていますが、このフックはトップレベルで呼び出すことはできず、Reactの関数コンポーネント内で呼び出す必要があります。以下のコードは、React Router バージョン5.1でこれを行う方法を示しています:

親コンポーネントに history を渡し、同じ history オブジェクトをアプリケーションのどこでも使用できるようにエクスポートする:

import React from 'react'
import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history' // which comes along with React-Router

export const history = createBrowserHistory();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <Router history={history}>
        <App />
    </Router>
)

エクスポートされた history オブジェクトをアプリケーションの他の場所のトップレベルで使用する:

switch (status) {
    case 404:
        history.push('/not-found');
        break

もし新しいバージョン6でこれをトップレベルでやりたい場合、何をおすすめしますか？

回答 #1

バージョン6では、以下のように useNavigate を使用してください:

let navigate = useNavigate()

navigate('/not-found')

このフックはトップレベルで呼び出すことはできませんので、呼び出したい関数に渡すために navigate 関数に渡すことができます。