React Router v6 で外部コンポーネントに移動する方法は?

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

React Router v5 では、グローバル履歴オブジェクトを作成することで、コンポーネントの外部での便利なナビゲーションが可能になりました。ただし、この動作は v6 ではすぐにはわかりません。

カスタム ルーターによるナビゲーションのカスタマイズ

1 つの方法は、カスタム履歴オブジェクトを利用してナビゲーション状態を管理するカスタム ルーターを作成することです。 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>

このカスタム ルーターをカスタム履歴オブジェクトで利用することで、履歴オブジェクトを効果的にプロキシし、ナビゲーション状態を管理します。

ルーターの交換

React アプリケーション内で、デフォルトのルーターをカスタムルーターと交換できます:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

Unstable History Router

react-router-dom@6 は ' を導入しましたカスタム履歴ライブラリ インスタンスの注入を可能にする不安定な' 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}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

この API は不安定としてマークされており、さらなる改良や依存関係管理の考慮事項が必要になる可能性があることに注意してください。

RRDv6.4データ ルーター

データ ルーターを備えた RRDv6.4 では、「不安定な」ナビゲート機能がルーター オブジェクトによって直接公開されています:

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

const router = createBrowserRouter(...);

...

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

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