React Routerを使って遷移先に値を表示させる方法

Question

実装したいこと

Reactでお問い合わせフォームを実装しています。
お問い合わせフォームに入力された内容を確認ボタンを押下し、確認画面で入力した内容が表示されるようにしたいです。
react-router-domのV6を使用し、useNavigate を使って遷移先に値を渡し、遷移先でuseParamsを使ってURLから値を取得したいと考えています。
現状のコードから

• フォームに入力された値が遷移先に渡されること
• 渡された値を遷移先で表示されること

を実装するにはどのような記述が適切でしょうか。

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';

function FormNew(props: any) {
  function handleFormNew() {

  navigate(`/form/${form_id}/entries/confirm`, { state: { } })
}

  type FormData = {
    name :string,
    email: string,
    content: string,
  }

  const navigate = useNavigate();
  const { form_id } = useParams();
  const [ formData, setFormData ] = useState<FormData>({
    name: '',
    email: '',
    content: '',
  });

  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.persist();
    const { id, value } = e.target
    setFormData({ ...formData, [id]: value })
  }

  return (
      <>
        <PageTitle>お問い合わせ</PageTitle>

        <PageSubTitle>名前</PageSubTitle>
        <FormInput id="name" type="text"  onChange={onChangeHandler} value={formData.nickname} />

        <PageSubTitle>Eメール</PageSubTitle>
        <FormInput id="email" type="text" onChange={onChangeHandler} value={formData.email} />

        <PageSubTitle>お問い合わせ内容</PageSubTitle>
        <FormTextarea id="content" onChange={onChangeHandler} value={formData.content} />

        <FormSubmit onClick={handleFormNew}>
          確認へ
        </FormSubmit>
  　</>
  )
}

export default FormNew;

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import FormNew from '../FormNew';

const FormConfirm = () => {
  function handleFormSend() {
    // APIにPOSTする処理
  }

  const params = useParams();

  return (
      <>
        <PageTitle>お問い合わせ確認</PageTitle>

        <PageSubTitle>名前</PageSubTitle>
          // ここにフォームの入力内容を表示する
        <PageSubTitle>Eメール</PageSubTitle>
          // ここにフォームの入力内容を表示する
        <PageSubTitle>お問い合わせ内容</PageSubTitle>
          // ここにフォームの入力内容を表示する
        <FormSubmit onClick={handleFormSend}>
          送信
        </FormSubmit>
     </>
  )
};

export default FormConfirm;

Comments

[hoshi-takanori]

> 遷移先でuseParamsを使ってURLから値を取得
react-router で画面間で情報をやり取りするのに URL を使う必要はありません。
context とか redux とか使うのが普通かと…。

[CSHky130]

Reduxを使うのが適切ということですかね…

Answer 1

更新されたStateは{ state: { formData: formData }}でコンポーネントに追加、
渡されたデータ自体はuseLocationでデータを取得することができました。

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import FormNew from '../FormNew';

// Stateのタイプを定義する

interface stateType {
  formData: {
    nickname: string,
    email: string,
    content: string,

const FormConfirm = () => {
  function handleFormSend() {
    // APIにPOSTする処理
  }

  // Stateの受け取り
  const state = useLocation().state as stateType;
  console.log(state.formData);

  return (
    <>
      <PageTitle>お問い合わせ確認</PageTitle>
      <PageSubTitle>名前</PageSubTitle>
        // データの表示
        {state.formData.nickname}
        // 略
      <Submit onClick={handleContactSend}>
        送信
      </FormSubmit>
   </>
  )
};

export default FormConfirm;