Reactについて学んだことをまとめる（その３）

以下のUdemyの講座を受講したので、学んだことをまとめていく。

React-Router

ページ遷移を実現するのに必要。

環境

react-router-domをpackage.jsonに記載し、導入する必要がある。

"react-router-dom": "5.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"

基本的な使い方

import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';

import './App.css';
import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home</Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
        <Route path="*">
          <Page404 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

• BrowserRouterタグでページ全体を囲む。囲まれた範囲でしか機能が有効にならない。
• Linkタグでリンクを表示し、toに指定されたパスがリンクをクリックした際に渡される。
• Switchタグの中にページ遷移設定を記載していく。
• Routeタグでpathに指定されたパスと一致した際の表示内容を設定する。
  • pathに*を指定するとどのルートにも一致しなかった場合に表示する内容を指定できる。
  • exactを付加するとpathに指定されたパスと完全一致した場合に遷移するように設定できる。
  • renderにアロー関数を渡してその内容を描写することもできる。
  • renderのアロー関数の引数にはPropsを使用することができ、様々な情報を受取ることができる。

<Route path="/page1" render={() => <Page1 />}

<Route
  path="/page1"
  render={({ match: { url } }) => (
    <Switch>
      <Route exact path={url}>
        <Page1 />
      </Route>
      <Route path={`${url}/detailA`}>
        <Page1DetailA />
      </Route>
      <Route path={`${url}/detailB`}>
        <Page1DetailB />
      </Route>
    </Switch>
  )}
/>

URLパラメータ

URLパラメータを扱う際はRouteタグのpathに:ParameterNameという形式で指定する。

<Route path="/page2/:id">
  <UrlParameter />
</Route>

Linkタグでリンクをクリックした際にURLパラメーターを渡す。

<Link to="/page2/100">URL Parameter</Link>

渡されたパラメーターはuseParamsを使用して受け取ることができる。
受け取る変数名はRouteタグのpathで指定した名前と合わせる。

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

export const UrlParameter = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>UrlParameter</h1>
      <p>{id}</p>
    </div>
  );
};

クエリパラメータ

Linkタグのtoにパスを指定する際、クエリパラメータを含める。

<Link to="/page2/999?name=hogehoge">Query Parameter</Link>

渡されたクエリパラメータはuseLocationを利用すると取り出すのが簡単になる。
useLocationのsearchにクエリパラメータが格納される。
URLSearchParamsにクエリパラメータを渡すと、クエリパラメータを扱う様々な関数を利用できるようになる。
getメソッドで指定したkeyの値を取得することができる。

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

export const UrlParameter = () => {
  const { id } = useParams();
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  return (
    <div>
      <h1>UrlParameter</h1>
      <p>{id}</p>
      <p>{query.get('name')}</p>
    </div>
  );
};

ページ間で情報を受け渡す(動作未確認)

ページ間で情報を受け渡す際は、Linkタグのtoにオブジェクトの形で設定を行う。
pathnameにパスの情報を指定し、stateにページ間で受け渡す情報を指定する。

<Link to={{ pathname: '/page1/detailA', state: { a: "1", b: "2" }}>DetailA</Link>

渡された値はuseLocationのstateに格納されている。

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

export const Page1DetailA = () => {
  const { state } = useLocation();

  return (
    <div>
      <h1>Page1DetailA</h1>
      <p>{state}</p>
    </div>
  );
};

上手く動作を確認できなかったので、別途確認する。

Linkを使用しないページ遷移(動作未確認)

useHistoryを使用する。
push("URL")で指定したURLへ遷移し、goBackメソッドで前の画面に遷移する。

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

export const Page1 = () => {
  const history = useHistory();

  const onClickPush = () => {
    history.push('/page1/detailA');
  };

  const onClickGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <h1>Page1</h1>
      <Link to="/page1/detailA" state={{ a: 1, b: 2 }}>
        DetailA
      </Link>
      <br />
      <Link to="/page1/detailB">DetailB</Link>
      <br />
      <button onClick={onClickPush}>Push</button>
      <button onClick={onClickGoBack}>goBack</button>
    </div>
  );
};

上手く動作を確認できなかったので、別途確認する。