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

# 初めに

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

![Qiita-gif用 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/8b862f97-9648-8dcd-e689-2bac36210a25.gif)

https://reactrouter.com/

# インストール

```
npm install react-router-dom@6
```

https://reactrouter.com/docs/en/v6/getting-started/installation

# コード

```React: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;
```

```React: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;
```

```React: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;
```

```React:index.js
import { render } from "react-dom";
import App from "./App";

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

# 参考記事

https://reactrouter.com/

https://reactrouter.com/docs/en/v6/getting-started/tutorial

https://reactrouter.com/docs/en/v6/getting-started/installation