🪡

【React】react-router-domの使い方

2024/02/09に公開

こんにちは、ゆらりです。
前回、Reactの基礎知識を身につけるための学習手順を自分なりにまとめてみました。
今回は SPA を作るとき、よく使うと思われる「router」の使い方をメモ書き程度にまとめていこうと思います。(自分の学習記録も兼ねて)

react-router-dom をインストールする

端末

$ npx create-react-app router-app
$ cd router-app
$ npm install react-router-dom

使い方

実験用に作ったコードをそのまま持ってきました。

router-app/src/App.js

import './App.css';
import Home from "./Home";
import About from "./About";
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<h1>Not Found Page</h1>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

router-app/src/Home.js

import React from "react";

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

export default Home;

router-app/src/About.js

import React from "react";

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

export default About;

注目するポイント

router-app/src/App.js (4行目)

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

これは、「"react-router-dom" から BrowserRouter, Route, Routes, Link っていう機能を読み込んで App.js 内で使えるようにするよ〜」って意味です。

router-app/src/App.js (9~16行目)

<BrowserRouter>
    <Link to="/">Home</Link> | <Link to="/about">About</Link>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<h1>Not Found Page</h1>} />
    </Routes>
</BrowserRouter>

どんな仕組みで動いてるのかなって気になっちゃいますよね...
でも、一旦形として覚えてしまいましょう。

構成として BrowserRouter > Routes > Route のような順番で入れ子になっています。
なので最初に書くタグは <BrowserRouter> です。

Route に書く情報は

"path": URLの指定
"element": ページに表示させるコンポーネントの指定
の２つです。

router-app/src/App.js (14行目)

{/* 省略 */}
<Route path="*" element={<h1>Not Found Page</h1>} />
{/* 省略 */}

Route の path に "*" を指定すると、用意されていないURLにアクセスがあったときに自動的に飛ばされるページを設定できます。
今回は「ページが存在しないよ〜」っていうコンポーネントを作るのが面倒だったので、そのままh1タグで返してます。

router-app/src/App.js (10行目)

{/* 省略 */}
<Link to="/">Home</Link> | <Link to="/about">About</Link>
{/* 省略 */}

Link タグです。react-router-domで使える機能です。
aタグでも画面の移動は可能です、え、じゃあ違いは...？違いっていうと...うーん。
いま現状、僕の知識が無さすぎてリロードの有無ぐらいしかわかりません。
実際にブラウザで両方実装して試してみるとわかるはず...
参考記事: https://note.com/zak5/n/n2360141d7a2c

Link に書く情報は

"to": route で設定したURLで飛ばしたい場所を指定
これだけです。

練習で使っててハマったポイント

ひとつのアプリで BrowserRouter は一回しか書いてはいけないというルールがあるみたいです。
なので、いろんなコンポーネントでLinkタグを使いたい時は、App.js 等の先頭になるファイルで BrowserRouter を使いましょうって話。

(複数のページで、Linkタグを書こうーって思ってBrowserRouterで囲って...ってやっていたら動かなかったのでメモしました 2024/2/23更新)

最後に。

react-router-dom のバージョンが 6 になったことで、前回学習に使うと言っていた router の動画と互換性が無くなってしまったことが発覚したので急遽記事を書きました。
間違った情報がありましたらコメントで知識を分けてほしいです...
よろしくおねがいします。

react-router-dom をインストールする

使い方

注目するポイント

練習で使っててハマったポイント

最後に。

Discussion