Reactでのstateを渡すページ遷移とLinkを使わないページ遷移について学ぶ

学んだこと

state を渡す方法

• Link toを設定時に、state も同時に渡す事ができる。

実際に state を渡してみた

• Page1.jsx
  • 前回まではLink to="パス名"にしていたが、``にて state を渡すように変更

import { Link } from 'react-router-dom/cjs/react-router-dom.min';

export const Page1 = () => {
  const arr = [...Array(100).keys()];
  return (
    <div>
      <h1>Page1ページです。</h1>
      <Link to=>DatailA</Link>
      <br />
      <Link to="/page1/detailB">DatailB</Link>
    </div>
  );
};

• Page1DetailA.jsx
  • 受け取った state を console.log にて表示。
  • state を受け取るには、useLocation を使用し受け取るようにする。

import { useLocation } from 'react-router-dom';

export const Page1DetailA = () => {
  const { state } = useLocation();
  console.log(state);
  return (
    <div>
      <h1>Page1DetailAページです。</h1>
    </div>
  );
};

Link を使わないページ遷移について

• react-router-domのuseHistoryを使用することで実現することができる。

実際に Link を使わないページ遷移について実装してみた

• Page1.jsx
  • 今回はボタンを押すと、Page1 の detailA に遷移するようにする。
  • const OnClickDetailA = () => history.push('/page1/detailA');でボタンのクリックイベント時に/page1/detailAに遷移するように設定し、ボタンのOnClickにOnClickDetailA関数を設定

import { Link, useHistory } from 'react-router-dom/cjs/react-router-dom.min';

export const Page1 = () => {
  const arr = [...Array(100).keys()];
  const history = useHistory();
  const OnClickDetailA = () => history.push('/page1/detailA');
  return (
    <div>
      <h1>Page1ページです。</h1>
      <Link to=>DatailA</Link>
      <br />
      <Link to="/page1/detailB">DatailB</Link>
      <br />
      <button onClick={OnClickDetailA}>DetailA</button>
    </div>
  );
};

• Page1DetailA
  • page1 に戻るボタンを配置した。
  • const onClickBack = () => history.goBack();で前のページに戻る処理を作成し、ボタンの onClick にonClickBackを設定

import { useLocation, useHistory } from 'react-router-dom';

export const Page1DetailA = () => {
  const { state } = useLocation();
  console.log(state);
  const history = useHistory();
  const onClickBack = () => history.goBack();
  return (
    <div>
      <h1>Page1DetailAページです。</h1>
      <button onClick={onClickBack}>戻る</button>
    </div>
  );
};