react-router-domのルーティング設定

react-router-domのルーティング設定備忘

開発環境

node v20.14.0
npm 10.7.0

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.0",

reactプロジェクトの作成

ターミナル

npx create-react-app PROJECT-NAME

react-router-domのインストール

npm install react-router-dom

ディレクトリ構成

src/
├── components
│   ├── Nav.js
│   ├── Home.js
│   ├── Login.js
│   └── Logout.js
├── App.js
└── Index.js

App.jsのルーティング設定の記述

Routeコンポーネントのpathに遷移したいパスの設定をする。
elementの中に遷移先のコンポーネントを指定できる。
pathに"*"を指定すると存在しないパスが入力された時に表示するページを設定することができる。(404NotFoundページ)

App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import Logout from "./components/Logout";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/logout" element={<Logout />}></Route>
        <Route path="*" element={<h1>Not Found Page</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

Linkの記述

Linkコンポーネントのtoに遷移したいパス名を指定。

Nav.js

import React from 'react';
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <nav>
      <Link to={"/"}>ホーム</Link>
      <Link to={"/login"}>ログイン</Link>
    </nav>
  )
}

export default Nav;

参考

追記

共通したレイアウトを使うときはRouteの中にRouteを入れ込むこともできる

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import AuthLayout from "./components/layout/AuthLayout";
import Login from "./pages/Login";
import Register from "./pages/Register";


function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<AuthLayout />}>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/register" element={<Register />}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

外側のRouteで囲ったコンポーネントにOutletを使うとLogin,Registerの内容が反映される。

AuthLayout.jsx

import React from 'react'
import { Outlet } from "react-router-dom"

const AuthLayout = () => {
  return (
    <div>
      <h1>Login,Registerの両方で表示する共通パーツ</h1>
      <Outlet />　 {/* Login, Registerの中身 */}
    </div>
  )
}

export default AuthLayout