useSearchParams

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

const Contact = () => {
  const navigate = useNavigate();
  const [params, setParams] = useSearchParams();
  const text = params.get("q"); <--setParamsのqが代入される
  
  return (
    <div>
      <h1>Contact Form</h1>
      <label>What's your name?</label>
      <input type='text' value='HELLO!' onChange={(e)=>
        setParams({ q: e.target.value; })
      } />
      <button onClick={()=>
        navigate('/', { state: { text, }, })
      }>SEND</button>
    </div>
  );
}
export default Contact;

import React from 'react';
import { useLocation } from 'react-router-dom';
const Top = () => {
  const location = useLocation();
  console.log(location);
  return (
    <div>
      <h1>TOP</h1>
      <p>Your Name is {location.state.text}</p>
    </div>
};
export default Top;