React Router v6 で外部コンポーネントに移動するにはどうすればよいですか?

React Router v6 での外部コンポーネントのナビゲーション

React Router v5 では、グローバル履歴オブジェクトを作成してルーターに渡すことで、コンポーネントの外部でのナビゲーションが可能になりました。ただし、このアプローチは v6 では不可能になりました。

カスタム ルーター アプローチ

これに対処するには、React Router v6 ルーターのような履歴状態をインスタンス化するカスタム ルーターを作成できます。たとえば、BrowserRouter の場合:

<code class="javascript">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}
    />
  );
};</code>

これは、カスタム履歴オブジェクトを Router にプロキシし、ナビゲーション状態を管理します。元のルーターをこのカスタムルーターに置き換えます:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 では、履歴インスタンスにアクセスするために不安定な_HistoryRouter も導入されています:

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

これはインスタンスをエクスポートします履歴ライブラリのこれは、React コンポーネントの外部からアクセスできます。

データ ルーター

React Router v6.4 では、新しい「未接続」ナビゲーション メソッドがデータ ルーターで利用可能です:

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

このメソッドは、ルーターのナビゲート機能への直接アクセスを提供し、データ ルーターを使用してコンポーネントの外側に移動できるようにします。

以上がReact Router v6 で外部コンポーネントに移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。