フォームを送信した後、別の場所にリダイレクトしようとしていましたが、開発者コミュニティでその解決策を探していましたが、残念ながら、それらのほとんどは Link コンポーネントを使用する方法のみを示しており、この反応から既に削除されていますversion@6、そして反応ルーターの公式ウェブサイトを見た後、私は答えを得ました.

このブログは主に、この問題に対する答えを探してここに来る人々の避難所になることを目的としています.

useNavigate フック

useNavigate フックは、プログラムでナビゲートできるようにする関数を返します.関数には 2 つのシグネチャがあります.

オプションの 2 番目の { replace, state } 引数を指定して To 値 ( と同じ型) を渡すか、または

履歴スタックに移動するデルタを渡します.たとえば、navigate(-1) は戻るボタンを押すことと同じです.

1.に

たとえば、フォームが送信された後.

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

export const SignupForm = () => {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("/success");
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

2. オプション - 状態

ロケーション状態で保存するオブジェクト.これは、URL に含まれる必要はないが、ルート遷移に関連付けられている状態に役立ちます.サーバーにデータを「投稿」するようなものだと考えてください.

const NewTodo = () => (
  <TodoForm
    onSubmit={async todo => {
      let id = await createNewTodo(todo)
      // put some state on the location
      navigate("/todos", { state: { newId: id } })
    }}
  />
)

const Todos = props => (
  <div>
    {todos.map(todo => (
      <div
        style={{
          background:
            // read the location state
            todo.id === props.location.state.newId
              ? "yellow"
              : ""
        }}
      >
        ...
      </div>
    ))}
  </div>
)

3.オプション - 交換

通常、navigate を呼び出すと、新しいエントリが履歴スタックにプッシュされるため、ユーザーは [戻る] ボタンをクリックしてページに戻ることができます. replace: true を渡して移動すると、履歴スタックの現在のエントリが新しいエントリに置き換えられます.

たとえば、ユーザーが「購入」ボタンをクリックしたが、最初にログインする必要がある場合、ログイン後に、ログイン画面を希望のチェックアウト画面に置き換えることができます.その後、戻るボタンをクリックしても、ログイン ページは表示されません.

navigate("/some/where", { replace: true })

反応ルーターのウェブサイト Link も確認できます