Zenn
🌊

react-router v6でページ遷移を実装してみた

2023/06/03に公開
React
Tailwind CSS
router
link
routing
tech

ポートフォリオを作成しているなかでページ遷移をreact-routerで実装したいと思い、いろいろ調べながら作りました。後で見返せるようにメモとして残しておきます。

やりたいこと

トップ画面に各ページへ遷移できるリンクを設置
クリックして該当ページに飛ぶようにする

react-router-domから以下をimportする

  • BrowserRouter
  • Route
  • Routes
  • Link

index.tsx

index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);
reportWebVitals();

BrowserRouterはエイリアスで Routerという名前にして使用しています
今回はApp.tsxをルーティング対象にするので<App />を<Router>(=BrowserRouter)でラップしています

App.tsx

App.tsx
import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import { Career } from "./components/Career/Career";
import { Sns } from "./components/Sns/Sns";
import { SelfStudy } from "./components/SelfStudy/SelfStudy";
import { Application } from "./components/Application/Application";
import { Home } from "./components/Home/Home";

function App() {
  return (
    <div className="bg-gradient-to-r from-sky-700 from-30% via-sky-800 via-40% to-sky-950 to-70% w-full h-screen">
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/Application" element={<Application />}></Route>
        <Route path="/Career" element={<Career />}></Route>
        <Route path="/Sns" element={<Sns />}></Route>
        <Route path="/SelfStudy" element={<SelfStudy />}></Route>
      </Routes>
    </div>
  );
}

export default App;

ここではRoutesとRouteを使用します
（react-router v5ではRoutesではなくSwitchを使用していました）
Routeの中にはpathとelementを指定します。
pathは次のHome.tsxで指定しているtoと同じにしています。
elementには表示するコンポーネントを指定します。

Home.tsx

Home.tsx(トップ画面)
import React from "react";
import { Link } from 'react-router-dom'

export const Home = () => {
  const ITEMS = [
    {
      id: 0,
      href: "/Application",
      children: "Application",
      title: "Application",
      description: "Here is a list of applications I have created so far",
    },
    {
      id: 1,
      href: "/Career",
      children: "Career",
      title: "Career",
      description: "This is my previous career history",
    },
    {
      id: 2,
      href: "/Sns",
      children: "Sns",
      title: "SNS",
      description:
        "If you don't mind, please take a look at the various SNS I have listed",
    },
    {
      id: 3,
      href: "/SelfStudy",
      children: "SelfStudy",
      title: "Self-study",
      description:
        "I am writing about the things I consciously focus on when I study",
    },
  ];
   return (
    <div className="max-w-5xl h-screen py-32 mx-auto grid grid-cols-2 grid-rows-2 gap-7 justify-around">
      {ITEMS.map(({ id, title, href, children, description }) => {
        return (
          <Link
            key={id}
            to={href}
            className="px-20 py-8 mx-3 text-emerald-500 text-center border-8 border-double border-teal-500 rounded-xl hover:scale-110 duration-1000"
          >
            <h1 className="text-2xl font-bold text-green-300">
              {title}&nbsp;→
            </h1>
            <p className="w-full mt-2">{description}</p>
          </Link>
        );
      })}
    </div>
  );
};

ここではLinkを使用します。Linkはaタグのようなものなのでクリックするとurlの末尾がtoで指定したものに変わります。
ITEMSという変数を定義します。その中にオブジェクト形式でいくつかkeyとvalueを定義しておきJSX内でmap関数を使っています。map関数の引数部分は分割代入でITEMS内の各値を受け取りそれをreturn内で代入しています。

Application.tsx(各コンポーネント)

Application.tsx
import React from "react";

export const Application = () => {
  return (
    <div>Application</div>
  );
};

ここは表示したい各コンポーネントになります。中身は適当です。

Discussion