こんにちは、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まとめ
参考書籍
ソースコード
ここまで実装したソースコードを下記に記載します。
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 |
コメントを残す
コメントを投稿するにはログインしてください。