[React]~Admin画面2:ルーティング処理の実装 ~

こんにちは、KOUKIです。React/NextJSで画面開発を行なっています。

前回は、ダッシュボードの実装を行いました。

今回は、ルーティング処理を実装したいと思います。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

フォルダ/ファイル

モジュールのインストール

ルーティング処理

今回、ホーム画面(Users画面を含む)、ログイン画面、登録画面の3つの画面を用意し、URLを指定して各ページに飛ぶ処理(ルーティング)を実装します。

ログイン画面

BootstrapのExampleを参考にログイン画面を実装します。

登録画面

登録画面は、テンプレートだけ実装しておきます。
※次回、実装します

Users画面

前回、App.tsxに実装していた表を、Users.tsxに移しましょう。

App.tsx

App.tsxにルーティング機能を実装します。

これは、「react-router-dom」モジュールを利用すると比較的、簡単に実装できます。

「http://localhost:3000/」、「http://localhost:3000/login」、「http://localhost:3000/register」へのルートを設定しました。

検証

ホーム画面

ブラウザから「http://localhost:3000/」へアクセスします。

ログイン画面

ブラウザから「http://localhost:3000/login」へアクセスします。

登録画面

ブラウザから「http://localhost:3000/register」へアクセスします。

OKですね。

次回

次回は、登録画面の実装をしましょう。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Login.tsx

Login.css

App.tsx

Users.tsx

Register.tsx

コメントを残す