はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生です！
僕は現在udemyの教材を使ってReactの勉強をしています。その中でつまずいた箇所がいくつかあったので、まとめたいと思います。今回は前回の記事の内容(React Router)をさらに丁寧に解説していきたいと思います。

前回の記事

React Routerとは

Reactで画面遷移を簡単に実装できるAPI(機能)です。

解説編

まず、React Routerに躓いた大きな原因は教材とバージョンが異なったことにあります。教材ではv5を使用していましたが、僕は最新バージョンであるv6を使用しました。今回の記事ではv5と比較するといったことはしませんが、基本的なことは実装できるように解説したいと思います。

サンプルコードの完成形

解説のためのサンプルコードを載せます

Router.jsx

/* react-router-dom以外からのimport(自分で実装したもの)は割愛させて
いただきます。 */
import { Route, Routes } from "react-router-dom"

export const Router = () => {
    return (
        <Routes>
            <Route path='/' element={<Home />} />
            {/*親のパスをpathに設定 */}
            <Route path='/page1'>
                {/*パスが"/page1/~~"の~~のみ(相対パス)をpathに設定*/}
                <Route index element={<Page1/>}/>
                <Route path="detaila" element>
                <Route path="detailb">
            </Route>
        </Routes>
    )
}

Home.jsx

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

Page1.jsx

import { Link, useNavigate } from "react-router-dom"

export const Page1 = () => {
    const navigate = useNavigate();
    return(
        <div>
            <h1>Page1</h1>
            <Link to="detaila">DetailA</Link>
            <Link to="detailb">DetailB</Link>
            <button onClick={() => navigate("detaila")}>DetailA</button>
        </div>
    )
}

Router.jsxでルーターの設定をしています。Home.jsx, Page1.jsxに関しては画面遷移で表示するコンポーネントです。基本的にはRouter.jsxに関して解説します。

1. 基本的な画面遷移の実装

まずは、Routesタグ(コンポーネントですがこれ以降もタグと記載します。)を書き、その中で各ルーティングの設定をしていきます。
そして、Linkタグを使用して、設定したルーティングへのリンクを生成します。これで実装完了！

2. ネストされた画面遷移(画面ごと)

page1のルーティング設定に注目してください。
ここでもっとも注目すべきはpathです！
Routeタグの中にさらにRouteタグをネストすることで、さらに一段階画面遷移を実装することが出来ます。

個人的に書きやすいなと思ったのですが、外側のRouteタグにpathを指定しておけばネストされたRouteタグに記載するパスはその

相対パス

でかけてしまいます！v5と違ってここはいいなと思いました。
また、外側のRouteタグに指定したパスでコンポーネントを描画するにはサンプルコードの通り、pathの代わりに index を使用します。

3. ボタンによる画面遷移
Linkタグによって生成されるリンクではなく、ボタンを押すことで画面遷移を可能とする方法を解説します。

サンプルコードのPage1.jsxに注目してください。これに関しては実装がとても簡単で、
useNavigateとそれが返す値であるnavigate関数(名前は自由)
を使用するだけです。
※ルーティング設定は大前提です。

また、画面遷移先(Page1DetailA)から遷移元(Page1)に戻るためのボタンを実装したい場合以下のように記述することで可能となります。

Page1DetailA.jsx

import { useNavigate } from "react-router-dom"

export const Page1DetailA = () => {
    const navigate = useNavigate();
    return(
        <div>
            <h1>Page1 DetailA</h1>
            <button onClick={() => navigate(-1)}>back</button>
        </div>
    )
}

negative関数の引数を -1 とするだけ！

終わりに

今回の記事は少し長々と書いてしまいましたが、最後まで読んでいただきありがとうございました！お疲れ様です💦
今回の記事である程度の書き方がわかれば理解度がグンと上がると思います！開発が複雑になってくるとだんだんとそれに比例してコード量も多くなっていきますが、へこたれずに頑張っていきましょう～

Part1とタイトルにあるので察している方もいるかもしれませんが、Part2のもあります！次回はReactのコンテキストについて解説します！
ぜひ読んでみてね～～笑

参考

About Me

X(旧Twitter)
https://twitter.com/shunii_hack

公式ドキュメントでつかんだReactの核心Part1 ~React Router編~

はじめに

React Routerとは

解説編

終わりに

参考

About Me