React Router v6 のコンポーネントの外部で履歴オブジェクトにアクセスして使用するにはどうすればよいですか?

React Router v6 でのコンポーネントの外部への移動

React Router v5 では、コンポーネントの外部で履歴オブジェクトを作成し、それを Router に渡して使用することができました。外部のコンテキストで。ただし、これは React Router v6 では直接可能ではありません。

カスタム ルーターの実装

1 つの回避策は、React Router v6 ルーターと同様の方法で履歴状態をインスタンス化するカスタム ルーターを実装することです。例:

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

このカスタム ルーターはカスタム履歴オブジェクトを使用し、ナビゲーション状態を管理します。その後、デフォルトのルーターをこのカスタムルーターと交換して、目的の動作を実現できます。

unstable_HistoryRouter

別のアプローチは、React Router v6 によってエクスポートされた不安定な_HistoryRouter を利用することです。履歴ライブラリのインスタンスを小道具として取得し、外部から使用できるようにします。

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);

unstable_HistoryRouter は将来、重大な変更が加えられる可能性があることに注意してください。

からの移動Router 直接 (RRDv6.4)

React Router v6.4 以降を使用していて、Data ルーターを使用していない場合でも、unstable_HistoryRouter にアクセスできます。ただし、データ ルーターの場合は、ルーター オブジェクトに関連付けられたナビゲート関数を利用できます:

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

以上がReact Router v6 のコンポーネントの外部で履歴オブジェクトにアクセスして使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。