こんにちは、KOUKIです。React/NextJSで画面開発を行なっています。
前回は、ダッシュボードの実装を行いました。
今回は、ルーティング処理を実装したいと思います。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
前回
事前準備
フォルダ/ファイル
|
1 2 3 4 5 |
mkdir react-admin/src/pages touch react-admin/src/pages/Login.tsx touch react-admin/src/pages/Register.tsx touch react-admin/src/pages/Users.tsx touch react-admin/src/Login.css |
モジュールのインストール
|
1 2 3 4 |
cd react-admin/ # package.jsonがあるフォルダで実行する npm i react-router-dom npm i -D @types/react-router-dom |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// package.json { "name": "react-admin", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react-router-dom": "^5.1.7" } } |
ルーティング処理
今回、ホーム画面(Users画面を含む)、ログイン画面、登録画面の3つの画面を用意し、URLを指定して各ページに飛ぶ処理(ルーティング)を実装します。
ログイン画面
BootstrapのExampleを参考にログイン画面を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// pages/Login.tsx import '../Login.css' const Login = () => { return ( <main className="form-signin"> <form> <h1 className="h3 mb-3 fw-normal">Please sign in</h1> <div className="form-floating"> <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com" /> <label htmlFor="floatingInput">Email address</label> </div> <div className="form-floating"> <input type="password" className="form-control" id="floatingPassword" placeholder="Password" /> <label htmlFor="floatingPassword">Password</label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> </form> </main> ) } export default Login |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* src/Login.css */ .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-floating:focus-within { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } |
登録画面
登録画面は、テンプレートだけ実装しておきます。
※次回、実装します
|
1 2 3 4 5 6 7 8 9 |
// pages/Register.tsx const Register = () => { return ( <div> Register </div> ) } export default Register |
Users画面
前回、App.tsxに実装していた表を、Users.tsxに移しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// pages/Users.tsx import Nav from '../components/Menu' import Menu from '../components/Menu' const Users = () => { return ( <div> <Nav /> <div className="container-fluid"> <div className="row"> <Menu /> <main className="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div className="table-responsive"> <table className="table table-striped table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> </thead> <tbody> <tr> <td>1,001</td> <td>random</td> <td>data</td> <td>placeholder</td> <td>text</td> </tr> </tbody> </table> </div> </main> </div> </div> </div> ) } export default Users |
App.tsx
App.tsxにルーティング機能を実装します。
これは、「react-router-dom」モジュールを利用すると比較的、簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// App.tsx import './App.css'; import {BrowserRouter, Route} from 'react-router-dom' import Users from './pages/Users' import Login from './pages/Login' import Register from './pages/Register' function App() { return ( <div className="App"> <BrowserRouter> <Route path={'/'} exact component={Users}></Route> <Route path={'/login'} component={Login}></Route> <Route path={'/register'} component={Register}></Route> </BrowserRouter> </div> ); } export default App; |
「http://localhost:3000/」、「http://localhost:3000/login」、「http://localhost:3000/register」へのルートを設定しました。
検証
ホーム画面
ブラウザから「http://localhost:3000/」へアクセスします。
ログイン画面
ブラウザから「http://localhost:3000/login」へアクセスします。
登録画面
ブラウザから「http://localhost:3000/register」へアクセスします。
OKですね。
次回
次回は、登録画面の実装をしましょう。
Reactまとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1919737f.3a3d64cb.19197380.327d0987/?me_id=1278256&item_id=19902768&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F6041%2F2000009456041.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
ソースコード
ここまで実装したソースコードを下記に記載します。
Login.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// pages/Login.tsx import '../Login.css' const Login = () => { return ( <main className="form-signin"> <form> <h1 className="h3 mb-3 fw-normal">Please sign in</h1> <div className="form-floating"> <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com" /> <label htmlFor="floatingInput">Email address</label> </div> <div className="form-floating"> <input type="password" className="form-control" id="floatingPassword" placeholder="Password" /> <label htmlFor="floatingPassword">Password</label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> </form> </main> ) } export default Login |
Login.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* src/Login.css */ .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-floating:focus-within { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } |
App.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// App.tsx import './App.css'; import {BrowserRouter, Route} from 'react-router-dom' import Users from './pages/Users' import Login from './pages/Login' import Register from './pages/Register' function App() { return ( <div className="App"> <BrowserRouter> <Route path={'/'} exact component={Users}></Route> <Route path={'/login'} component={Login}></Route> <Route path={'/register'} component={Register}></Route> </BrowserRouter> </div> ); } export default App; |
Users.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// pages/Users.tsx import Nav from '../components/Menu' import Menu from '../components/Menu' const Users = () => { return ( <div> <Nav /> <div className="container-fluid"> <div className="row"> <Menu /> <main className="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div className="table-responsive"> <table className="table table-striped table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> </thead> <tbody> <tr> <td>1,001</td> <td>random</td> <td>data</td> <td>placeholder</td> <td>text</td> </tr> </tbody> </table> </div> </main> </div> </div> </div> ) } export default Users |
Register.tsx
|
1 2 3 4 5 6 7 8 9 |
// pages/Register.tsx const Register = () => { return ( <div> Register </div> ) } export default Register |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。