【React】useLocateの使い方

useNavigateでページ遷移するときに遷移先に値を渡す

背景

useNavigateを使って遷移先のページに値を渡すときにpropsが使えないので困った

結論

useLocationを使用すればいい

値を渡す方法

渡し方

App.jsx

import { useNavigate } from 'react-router-dom';
function App(){
    const navigate = useNavigate();
    navigate('/',{state: {message: '成功', type: 'success'}});
}

受取り方

Rciept.jsx

import { useLocation } from 'react-router-dom'
function Reciept() {
    const location = useLocation();
    const message = location.state;
  return (
    <div>{message.message}</div>
  )
}

オブジェクトを渡す方法

渡し方

App.jsx

import { useNavigate } from 'react-router-dom';
function App(){
    const navigate = useNavigate();
    navigate('/',{state: user});
}

受取り方

Rciept.jsx

import { useLocation } from 'react-router-dom'
function Reciept() {
    const location = useLocation();
    const user = location.state;
  return (
    <div>{user.uid}</div>
  )
}