【Git】 複数のコミットを rebase を使って1つにまとめる
【React + TypeScript】 react-router-dom を使ってルーティングを実装する
前提
- node 14.17.5
- react-router-dom 6.2.2
公式のチュートリアルを参考に進めます。
（公式のチュートリアルは React のため少々記載とは異なります。
1.プロジェクト作成
npx create-react-app [プロジェクト名] --template typescript
2.react-router-dom インストール
cd [プロジェクト名]
npm install react-router-dom@6
3.ファイルの作成
各ページ用のファイルを作成します。
mkdir routes
touch routes/Expenses.tsx
touch routes/Invoices.tsx
4.ファイル修正
ルーティングページ
1
2
3
4
5
6
7
| export default function Expenses() {
return (
<main style={{ padding: "1rem 0" }}>
<h2>Expenses</h2>
</main>
);
}
|
1
2
3
4
5
6
7
| export default function Invoices() {
return (
<main style={{ padding: "1rem 0" }}>
<h2>Invoices</h2>
</main>
);
}
|
TOP画面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Bookkeeper</h1>
<nav
style={{
borderBottom: "solid 1px",
paddingBottom: "1rem",
}}
>
<Link to="/invoices">Invoices</Link> |{" "}
<Link to="/expenses">Expenses</Link>
</nav>
</div>
);
}
|
ルーティング設定
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
| import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/Expenses";
import Invoices from "./routes/Invoices";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
// path URL
// element 画面
<Route path="/" element={<App />} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
// 上記のパスに当てはまらない場合
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
|
5.実行
# probably this
npm start
# or this
npm run dev
これで起動して画面が出ればOK。
あとは画面を増やしたり404ページを外出ししてあげたりなど工夫していけば良いでしょう。
参考
