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

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

React Router v6 では、履歴オブジェクトの処理方法に変更が加えられています。 v5 では共有履歴オブジェクトを作成して Router に渡すことができましたが、v6 では別のアプローチが必要です。

問題:

外部から移動するにはどうすればよいですか? React Router v6 のコンポーネントは、v5 の動作に似ていますか?

解決策:

以前の動作を複製するには、履歴状態をインスタンス化するカスタム ルーターを作成できます。 RRDv6 ルーターで行うのと同じように:

<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>

このカスタム ルーターをアプリケーションに含めて、カスタム履歴オブジェクトを渡します:

<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>

Update:

React Router v6 は履歴ルーターを表示し、カスタム履歴インスタンスを渡すことができます:

<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>

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 サイトの他の関連記事を参照してください。