React Router v6 でページ遷移をやってみた

初めに

以下のようなページ遷移を React Router v6 でやってみました。

インストール

npm install react-router-dom@6

コード

App.js

import {
  BrowserRouter,
  Routes,
  Route,
  Outlet,
  Link,
  useLocation
} from "react-router-dom";
import HomeBar from "./HomeBar";
import Login from "./Login";

const Links = () => {
  // リンクによるページ遷移
  return (
    <ul>
      <li>
        <Link to="/link1">Link 1</Link>
      </li>
      <li>
        <Link to="/link2">Link 2</Link>
      </li>
    </ul>
  );
};

const Link1 = () => <h2>This is a page of Link1.</h2>;
const Link2 = () => <h2>This is a page of Link2.</h2>;

const Menu = () => {
  let location = useLocation();
  return (
    <>
      <HomeBar />
      {/* これは今開いているページによって表示するコンポーネントを変えている */}
      {/* location.pathname で今開いているページのパスを取得できる */}
      {location.pathname === "/" ? <Links /> : <></>}
      <Outlet />
    </>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* ネストさせる(Route 要素の中に Route 要素を入れる)ことで、常に表示させたいコンポーネントを維持することができる */}
        <Route path="/" element={<Menu />}>
          {/* パスによってどのコンポーネントをレンダーするか決める */}
          <Route path="link1" element={<Link1 />} />
          <Route path="link2" element={<Link2 />} />
          <Route path="login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

HomeBar.js

import { useNavigate } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

const HomeBar = () => {
  let navigate = useNavigate();
  const goToAccountPage = () => {
    // ボタンクリックによるページ遷移
    navigate("/login");
  };

  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          News
        </Typography>
        <Button color="inherit" onClick={() => goToAccountPage()}>
          Login
        </Button>
      </Toolbar>
    </AppBar>
  );
};

export default HomeBar;

Login.js

import * as React from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

const Login = () => {
  // ページ遷移用に作ったコンポーネント
  return (
    <div style={{ padding: "1rem 0" }}>
      <h2>Login</h2>
      <TextField id="outlined-basic" label="User Name" variant="outlined" />
      <TextField id="outlined-basic" label="Password" variant="outlined" />
      <Button variant="contained" style={{ margin: "10px" }}>
        login
      </Button>
    </div>
  );
};

export default Login;

index.js

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

const rootElement = document.getElementById("root");
render(<App />, rootElement);

参考記事