【React】useLocation()で親画面から子画面にtrue、falseが渡せない

はじめに

useLocation()を使って親画面（Topページ）に表示される2つのボタンどちらかを押下することによって、子画面(Userページ)の表示を変える処理を実装中の出来事。

問題

親画面（Topページ）の管理者ユーザーボタンを押下すると、子画面(Userページ)のユーザー名の下に編集ボタンを表示させようとしたが、表示しなかった。

stateの中身もConsoleで確認した時、nullが渡されていた。

import styled from 'styled-components';
import { SecondaryButton } from '../atoms/button/SecondaryButton';
import { useNavigate } from 'react-router-dom';

export const Top = () => {
  const navigate = useNavigate();
  const onClickAdmin = () =>
    navigate({ pathname: '/users', state: { isAdmin: true } });
  const onClickGeneral = () =>
    navigate({ pathname: '/users', state: { isAdmin: false } });

  return (
    <SContainer>
      <h2>TOPページです</h2>
      <SecondaryButton onClick={onClickAdmin}>管理者ユーザー</SecondaryButton>
      <br />
      <br />
      <SecondaryButton onClick={onClickGeneral}>一般ユーザー</SecondaryButton>
    </SContainer>
  );
};

const SContainer = styled.div`
text-align: center;
color: black;
`;

解決方法

useNavigate()に記述した、navigate変数のpathnameを削除して記述すると、管理者ユーザーボタンを押下した時に編集ボタンが表示された。

import styled from 'styled-components';
import { SecondaryButton } from '../atoms/button/SecondaryButton';
import { useNavigate } from 'react-router-dom';

export const Top = () => {
  const navigate = useNavigate();
  const onClickAdmin = () => navigate('/users', { state: { isAdmin: true } });
  const onClickGeneral = () =>
    navigate('/users', { state: { isAdmin: false } });

  return (
    <SContainer>
      <h2>TOPページです</h2>
      <SecondaryButton onClick={onClickAdmin}>管理者ユーザー</SecondaryButton>
      <br />
      <br />
      <SecondaryButton onClick={onClickGeneral}>一般ユーザー</SecondaryButton>
    </SContainer>
  );
};

const SContainer = styled.div`
text-align: center;
color: black;
`;

おわりに

これもバージョン違いによる影響なのかと思ったら試行錯誤のやりがいがあり、逆に楽しくなってきました。。今後も色々試していきます。

参考