回答編集履歴
6
a
test
CHANGED
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
|
|
109
109
|
|
|
110
110
|
|
|
111
|
-
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
111
|
+
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside a <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
5
a
test
CHANGED
|
@@ -201,3 +201,15 @@
|
|
|
201
201
|
|
|
202
202
|
|
|
203
203
|
普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
> React/Reduxのキャッチアップ方法はみなさんどうしているのか
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
基本的には公式サイトで何かアップデートがあった時に確認ですね。
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
あとは、React/Reduxに限らず、フロントエンド関連技術や自分が関心のある技術を発信しているユーザーをTwitterでフォローしたり、ブログをRSSリーダーで購読したりですかね。
|
4
a
test
CHANGED
|
@@ -185,3 +185,19 @@
|
|
|
185
185
|
|
|
186
186
|
|
|
187
187
|
以上をふまえて、ご自身のコードを見直してみてください。
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
> React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている（npmパッケージ等が古くなっている等）などがあり、どうにもわからない状態です。
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
[https://github.com/ReactTraining/react-router
|
|
196
|
+
|
|
197
|
+
](https://github.com/ReactTraining/react-router)
|
|
198
|
+
|
|
199
|
+
[https://reacttraining.com/react-router/web/guides/philosophy](https://reacttraining.com/react-router/web/guides/philosophy)
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。
|
3
a
test
CHANGED
|
@@ -179,3 +179,9 @@
|
|
|
179
179
|
);
|
|
180
180
|
|
|
181
181
|
```
|
|
182
|
+
|
|
183
|
+
上記コードでエラーが出る原因は、前述の通り、`Link`コンポーネントを使用している`NavigationMenu`コンポーネントが`BrowserRouter`の内側ではなく外側にあるからです。
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
以上をふまえて、ご自身のコードを見直してみてください。
|
2
a
test
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
# 前提
|
|
2
|
+
|
|
3
|
+
質問に掲載されているコードは、質問と関係ない部分のコードが大量に含まれており、回答する上で回答しづらいので、簡易的なサンプルコードを解説用に作成しました。それをもとに以下、回答となりますので、元のコードと置き換えて参考になさってくださいませ。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
1
7
|
# サンプルコード
|
|
2
8
|
|
|
3
9
|
```ここに言語を入力
|
|
@@ -96,4 +102,80 @@
|
|
|
96
102
|
|
|
97
103
|
# 解説
|
|
98
104
|
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
> `You should not use <Link> outside a <Router>`
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
上のサンプルコードの場合は、`NavigationMenu`コンポーネントの中で`Link`コンポーネントを使っていますので、`NavigationMenu`コンポーネント自体が`BrowserRouter`コンポーネント以下の階層で使われている必要があります。
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
99
|
-
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
// 正常
|
|
122
|
+
|
|
123
|
+
ReactDOM.render(
|
|
124
|
+
|
|
125
|
+
<BrowserRouter>
|
|
126
|
+
|
|
127
|
+
<Fragment>
|
|
128
|
+
|
|
129
|
+
<NavigationMenu />
|
|
130
|
+
|
|
131
|
+
<Switch>
|
|
132
|
+
|
|
133
|
+
<Route exact path="/" component={Home} />
|
|
134
|
+
|
|
135
|
+
<Route exact path="/about" component={About} />
|
|
136
|
+
|
|
137
|
+
</Switch>
|
|
138
|
+
|
|
139
|
+
</Fragment>
|
|
140
|
+
|
|
141
|
+
</BrowserRouter>,
|
|
142
|
+
|
|
143
|
+
document.getElementById("root")
|
|
144
|
+
|
|
145
|
+
);
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
サンプルコードの上記部分を以下に置き換えた場合、質問に掲載されているエラーが生じることになります。
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
// エラー
|
|
156
|
+
|
|
157
|
+
ReactDOM.render(
|
|
158
|
+
|
|
159
|
+
<Fragment>
|
|
160
|
+
|
|
161
|
+
<NavigationMenu />
|
|
162
|
+
|
|
163
|
+
<BrowserRouter>
|
|
164
|
+
|
|
165
|
+
<Switch>
|
|
166
|
+
|
|
167
|
+
<Route exact path="/" component={Home} />
|
|
168
|
+
|
|
169
|
+
<Route exact path="/about" component={About} />
|
|
170
|
+
|
|
171
|
+
</Switch>
|
|
172
|
+
|
|
173
|
+
</BrowserRouter>
|
|
174
|
+
|
|
175
|
+
</Fragment>,
|
|
176
|
+
|
|
177
|
+
document.getElementById("root")
|
|
178
|
+
|
|
179
|
+
);
|
|
180
|
+
|
|
181
|
+
```
|
1
https://codesandbox.io/s/kw3n127wy7
test
CHANGED
|
@@ -88,6 +88,10 @@
|
|
|
88
88
|
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
+
Demo => [https://codesandbox.io/s/kw3n127wy7
|
|
92
|
+
|
|
93
|
+
](https://codesandbox.io/s/kw3n127wy7)
|
|
94
|
+
|
|
91
95
|
|
|
92
96
|
|
|
93
97
|
# 解説
|