React の Router ライブラリの使い方を具体例をまじえて解説【 TypeScript 】

import { render } from "react-dom";
import App from "./App";

// react-router-domからBrowserRouterをimportする。
import { BrowserRouter } from "react-router-dom";

render(
  // BrouserRouerタグでAppタグを囲む。
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

import { Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={} />
      <Route path="/" element={} />
      <Route path="/" element={} />
    </Routes>
  );
}

import React from "react";

export const About: React.VFC = () => {
  return <h1>ABOUT</h1>;
  );
};

import React from "react";

export const Contact: React.VFC = () => {
  return <h1>CONTACT</h1>;
  );
};

import { Routes, Route, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";

export default function App() {
  return (
　　// Flagmentタグの追加
    <>
　　　// nav・ul・li・Linkタグの追加
      <nav>
        <ul>
          <li><Link to="/">HOME</Link></li>
          <li><Link to="/about">ABOUT</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </>
  );
}

.activated {
  color: green;
  font-weight: bold;
  background-color: yellow;
}

// react-router-domから、NavLinkをimportする
import { Routes, Route, Link, NavLink } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";
// アクティブリンク用のクラスを定義したcssファイルをimportする
import "./styles.css";

export default function App() {
  // styleを定義した変数に対する型宣言
  const activeStyle: React.CSSProperties = {
    color: "red",
    fontWeight: "bold",
    backgroundColor: "blue"
  };

  return (
    <>
      <nav>
        <ul>
          <li>
            {/* 通常のLinkタグ */}
            <Link to="/">HOME</Link>
          </li>
          <li>
            {/* Linkタブではなく、NavLinkタグを使う */}
            <NavLink
              to="/about"
              // isActiveを引数にして、アロー関数を書く。
              // isActiveで三項演算子を使い、trueの場合にstyleが適用されるようにする。
              style={({ isActive }) => (isActive ? activeStyle : {})}
            >
              ABOUT
            </NavLink>
          </li>
          <li>
            {/* Linkタブではなく、NavLinkタグを使う */}
            <NavLink
              to="/contact"
              // isActiveを引数にして、アロー関数を書く。
              // isActiveで三項演算子を使い、trueの場合にclass名が適用されるようにする。
              className={({ isActive }) => (isActive ? "activated" : "")}
            >
              CONTACT
            </NavLink>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </>
  );
}

import React from "react";

export const NotFound: React.VFC = () => {
  return (
    <>
      <h1>404 not found</h1>
      <p>リクエストされたページは見つかりませんでした。</p>
    </>
  );
};

import { Routes, Route, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";
// 404エラー用のNotFoundコンポーネントをimport
import { NotFound } from "./components/NotFound";

export default function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">HOME</Link></li>
          <li><Link to="/about">ABOUT</Link></li>
          <li><Link to="/contact">CONTACT</Link></li>
          {/* Routeタグのpathに対応しないLinkタグ */}
          <li><Link to="/profile">PROFILE</Link></li>
          <li><Link to="/sns">SNS</Link></li>
          <li><Link to="/blog">BLOG</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        {/* path属性にワイルドカード「*」を設定　*/}
　　　　 {/* element属性にNotFoundコンポーネントを設定 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
}

import React from "react";
import { Alert } from "react-bootstrap";

export const Yamada: React.VFC = () => {
  return (
    <Alert variant="success">
      <ul>
        <li>名前：山田太郎</li>
        <li>性別：男</li>
        <li>年齢：25歳</li>
      </ul>
    </Alert>
  );
};

import { Routes, Route, Link } from "react-router-dom";
import { Container } from "react-bootstrap";
import { User } from "./components/User";
import { Yamada } from "./components/Yamada";
import { Tanaka } from "./components/Tanaka";
// ルートディレクトリで表示されるDefaultコンポーネントをimport
import { Default } from "./components/Default";

export default function App() {
  return (
    <Container className="mt-4">
      <nav>
        <ul>
          <li><Link to="/">User</Link></li>
          <li><Link to="/yamada">Yamada</Link></li>
          <li><Link to="/tanaka">Tanaka</Link></li></ul>
      </nav>
      <Routes>
        <Route path="/" element={<User />}>
          {/* index属性をつける代わりに、path属性はつけない */}
          <Route index element={<Default />} />
          <Route path="/yamada" element={<Yamada />} />
          <Route path="/tanaka" element={<Tanaka />} />
        </Route>
      </Routes>
    </Container>
  );
}

import React from "react";
import { Alert } from "react-bootstrap";

export const Default: React.VFC = () => {
  return (
    <Alert variant="success">
      <ul>
        <li>名前：</li>
        <li>性別：</li>
        <li>年齢：</li>
      </ul>
    </Alert>
  );
};

src
├ components
│   ├ Home.tsx
│   ├ Redirected.tsx
│
├ App.tsx
└ index.tsx

import { Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import { Home } from "./components/Home";
import { Redirected } from "./components/Redirected";

export default function App() {
  return (
    <Container>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/redirected" element={<Redirected />} />
      </Routes>
    </Container>
  );
}

import React, { useState } from "react";
import { Alert } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

export const Home: React.VFC = () => {
  const [nameT, setnameT] = useState<string>("");
  const [nameF, setnameF] = useState<string>("");
  const navigate = useNavigate();

  const trueSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    navigate("/redirected", { state: { name: nameT }, replace: true });
  };

  const falseSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    navigate("/redirected", { state: { name: nameF }, replace: false });
  };

  const trueChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setnameT(e.target.value);
  };
  const falseChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setnameF(e.target.value);
  };

  return (
    <>
      <h1>HOME</h1>
      <Alert variant="primary">
        <p>replace=true</p>
        <p>(リダイレクト元の履歴が残らない)</p>
        <form onSubmit={trueSubmit}>
          <legend style={{ marginBottom: "10px" }}>
            ユーザー名
            <input
              type="text"
              style={{ marginLeft: "5px" }}
              onChange={(e) => trueChangeInput(e)}
            />
          </legend>
          <button>ログインする</button>
        </form>
      </Alert>
      <Alert variant="success">
        <p>replace=false</p>
        <p>(リダイレクト元の履歴が残る)</p>
        <form onSubmit={falseSubmit}>
          <legend style={{ marginBottom: "10px" }}>
            ユーザー名
            <input
              type="text"
              style={{ marginLeft: "5px" }}
              onChange={(e) => falseChangeInput(e)}
            />
          </legend>
          <button>ログインする</button>
        </form>
      </Alert>
    </>
  );
};

import React from "react";
// リダイレクト時のstateを取得するために、useLocationフックをimportする
import { Link, useLocation } from "react-router-dom";

export const Redirected: React.VFC = (props) => {
  // useLocationフックを使い、stateを分割代入で取り出す
  const { state } = useLocation();

  return (
    <>
      <Link to="/">HOMEに戻る</Link>
      <h1>Redirected</h1>
      {/* stateの中にあるnameプロパティを参照する */}
      <p>ユーザー名:{state?.name ? state.name : null}</p>
    </>
  );
};

import React from "react";
import "../styles/form.css";
// react-router-domライブラリから、useSearchParamsフックをimportする
// また、クエリパラメーターの生成に使うcreateSearchParamsメソッドもimportする
import { useNavigate, createSearchParams } from "react-router-dom";

export const Form: React.VFC = () => {
  // useNavigateフックを使って、navigateメソッドを生成する
  const navigate = useNavigate();

  // formでsubmitが実行された時に起動させる関数
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // submitのページ更新などの機能を中断させる
    e.preventDefault();

    // formのinputタグ・selectタグから、入力値・選択値を取得する
    const name: string = e.currentTarget.userName.value;
    const gender: string = e.currentTarget.userGender.value;
    const score: string = e.currentTarget.userScore.value;

    // createSearchParamsによってクエリパラメーターのオブジェクトを生成
    // toStroing()によって文字列化した後に、paramsに格納
    const params = createSearchParams({
      name: name,
      gender: gender,
      score: score
    }).toString();

    // navigateオブジェクトにpathを設定して、リダイレクト処理
    navigate(`/users/?${params}`, { replace: false });
  };

  return (
    <>
      <h1>ユーザー検索フォーム</h1>
      <form onSubmit={handleSubmit}>
        <label className="form__label">
          名前
          <input type="text" name="userName" defaultValue="" />
        </label>
        <label className="form__label">
          性別
          <select name="userGender" defaultValue="">
            <option value="">未選択</option>
            <option value="male">男性</option>
            <option value="female">女性</option>
          </select>
        </label>
        <label className="form__label">
          成績
          <select name="userScore" defaultValue="">
            <option value="">未選択</option>
            <option value="100">100点満点</option>
            <option value="90">90点以上</option>
            <option value="80">80点以上</option>
            <option value="70">70点以上</option>
            <option value="60">60点以上</option>
            <option value="50">50点以上</option>
            <option value="40">40点以上</option>
            <option value="30">30点以上</option>
            <option value="failure">30点未満</option>
          </select>
        </label>
        <button>検索する</button>
      </form>
    </>
  );
};