【React】react-routerを使った画面遷移

react-routerを使った画面遷移を行う

今回はReact Router v6を使った画面遷移です。
v5とは書き方が変更されているようです。

• メインの画面

App.tsx

import "./styles/App.scss";
import { Route, Routes } from "react-router";
import { Home, About } from "-------";

function App() {
  return (
    <div className="app">
      <Routes>
        <Route
          path={`/home`}
          element={<Home />}
        ></Route>
        <Route
          path={`/about`}
          element={<About />}
        ></Route>
      </Routes>
    </div>
  );
}

export default App;

まず画面遷移を行いたい、コンポーネントを囲む<Routes></Routes>を書きます。
その中に<Route></Route>で画面遷移を行います。
pathとelementがあり、pathは画面遷移したときのパスを設定、elementは画面遷移したときに表示するコンポーネントを指定します。

• コンポーネント

home.tsx

export const Home = () => {
  return <h1>Home</h1>;
};

about.tsx

export const About = () => {
  return <h1>About</h1>;
};