質問編集履歴
3
デバッグ用のlog出力を削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -176,7 +176,6 @@
|
|
|
176
176
|
const [ imageUrl, setImageUrl ] = useState('')
|
|
177
177
|
|
|
178
178
|
useEffect(() => {
|
|
179
|
-
console.log('useEffect')
|
|
180
179
|
axios({
|
|
181
180
|
method: 'get',
|
|
182
181
|
url: 'https://dog.ceo/api/breeds/image/random'
|
2
パスパラメータの実装例を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -127,4 +127,82 @@
|
|
|
127
127
|
[React入門 ～React Router編～](https://zenn.dev/h_yoshikawa0724/articles/2020-09-22-react-router)
|
|
128
128
|
[React RouterがHooks対応したので使い方を整理する](https://qiita.com/ozaki25/items/bb0eb273611eebc603dd)
|
|
129
129
|
[Reactがrenderの内容を更新してくれなくてハマった](https://y-nakajo.hatenablog.com/entry/2017/12/30/033546)
|
|
130
|
-
[react-router 同ページ内で再描画されない解決メモ](https://qiita.com/yasuken/items/c7864f90101102ce4943)
|
|
130
|
+
[react-router 同ページ内で再描画されない解決メモ](https://qiita.com/yasuken/items/c7864f90101102ce4943)
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
### (修正)パスパラメータを利用した形に修正
|
|
134
|
+
#### App.js
|
|
135
|
+
```javascript
|
|
136
|
+
import Dog from './Dog';
|
|
137
|
+
|
|
138
|
+
import {
|
|
139
|
+
BrowserRouter as Router,
|
|
140
|
+
Switch,
|
|
141
|
+
Route,
|
|
142
|
+
Link
|
|
143
|
+
} from "react-router-dom";
|
|
144
|
+
|
|
145
|
+
const App = () => {
|
|
146
|
+
|
|
147
|
+
return (
|
|
148
|
+
<Router>
|
|
149
|
+
<Switch>
|
|
150
|
+
|
|
151
|
+
<Route exact path="/">
|
|
152
|
+
<Dog />
|
|
153
|
+
</Route>
|
|
154
|
+
|
|
155
|
+
<Route path="/page:pageNum">
|
|
156
|
+
<Dog />
|
|
157
|
+
</Route>
|
|
158
|
+
|
|
159
|
+
</Switch>
|
|
160
|
+
</Router>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export default App;
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
#### Dog.js
|
|
168
|
+
```javascript
|
|
169
|
+
import { useEffect, useState } from 'react'
|
|
170
|
+
import { Link, useHistory, useParams } from 'react-router-dom';
|
|
171
|
+
|
|
172
|
+
import axios from 'axios'
|
|
173
|
+
|
|
174
|
+
const Dog = () => {
|
|
175
|
+
|
|
176
|
+
const [ imageUrl, setImageUrl ] = useState('')
|
|
177
|
+
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
console.log('useEffect')
|
|
180
|
+
axios({
|
|
181
|
+
method: 'get',
|
|
182
|
+
url: 'https://dog.ceo/api/breeds/image/random'
|
|
183
|
+
}).then(response => {
|
|
184
|
+
setImageUrl(response['data']['message'])
|
|
185
|
+
})
|
|
186
|
+
}, [])
|
|
187
|
+
|
|
188
|
+
let { pageNum } = useParams();
|
|
189
|
+
if (typeof pageNum === 'undefined') {
|
|
190
|
+
pageNum = 1
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
return (
|
|
194
|
+
<>
|
|
195
|
+
<h1>Dog image</h1>
|
|
196
|
+
<h2>{ pageNum }ページ目</h2>
|
|
197
|
+
<img src={ imageUrl } alt='dog'/>
|
|
198
|
+
<p>{ imageUrl }</p>
|
|
199
|
+
<ul>
|
|
200
|
+
<li><Link to='/'>Top</Link></li>
|
|
201
|
+
<li><Link to='/page2'>Next</Link></li>
|
|
202
|
+
</ul>
|
|
203
|
+
</>
|
|
204
|
+
)
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
export default Dog
|
|
208
|
+
```
|
1
タイトルを修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
React Routerでクエリストリングが付与された際に画
|
|
1
|
+
React Routerでクエリストリングが付与された際に再描画(レンダリング)したい
|
body
CHANGED
|
File without changes
|