react-routerでページ遷移先に遷移前に選択した画像を表示したいです

Question

reactとreact-routerを使って入力フォームのようなものを作っています。

ファイル選択で取得した画像のurlをpropsを使って遷移先のページに渡して表示させたいと考えているのですが、
なかなか解決策を見つけることができないです。
どなたかお力添えいただけないでしょうか。

ファイル選択ボタンのコード

import React from "react";
import styled from "styled-components/macro";
import ItemButton from "./ItemButton"
import { useState } from "react";

const ChooseButton = (props) => {
  const [fileName, setFile] = useState("");
  const [fileImage, setImage] = useState("");
  
  const handleChooseFile = (event) => {
    // 1枚だけ表示する
    let file = event.target.files[0];
    
    setFile(file.name);

    // ファイルのブラウザ上でのURLを取得する
    let blobUrl = window.URL.createObjectURL(file);
    
    setImage(blobUrl);
  };
  
  return (
    <>
      <ItemButton as="label" htmlFor="chooseButton">
        ファイルを選択
        <input
        id="chooseButton"
        type="file"
        onChange={(event) => handleChooseFile(event)}
        css="display: none"
        />
      </ItemButton>
      {console.log(fileImage)}
      {/* <img src={fileImage} alt="none"/>
      <p>{fileName}</p> */}
    </>
  );
}

export default ChooseButton;

イメージ

Answer 1

redux使ってみたらどうですか