回答編集履歴
6
a
answer
CHANGED
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
|
|
54
54
|
> `You should not use <Link> outside a <Router>`
|
|
55
55
|
|
|
56
|
-
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
56
|
+
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside a <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
57
57
|
|
|
58
58
|
上のサンプルコードの場合は、`NavigationMenu`コンポーネントの中で`Link`コンポーネントを使っていますので、`NavigationMenu`コンポーネント自体が`BrowserRouter`コンポーネント以下の階層で使われている必要があります。
|
|
59
59
|
|
5
a
answer
CHANGED
|
@@ -99,4 +99,10 @@
|
|
|
99
99
|
](https://github.com/ReactTraining/react-router)
|
|
100
100
|
[https://reacttraining.com/react-router/web/guides/philosophy](https://reacttraining.com/react-router/web/guides/philosophy)
|
|
101
101
|
|
|
102
|
-
普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。
|
|
102
|
+
普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。
|
|
103
|
+
|
|
104
|
+
> React/Reduxのキャッチアップ方法はみなさんどうしているのか
|
|
105
|
+
|
|
106
|
+
基本的には公式サイトで何かアップデートがあった時に確認ですね。
|
|
107
|
+
|
|
108
|
+
あとは、React/Reduxに限らず、フロントエンド関連技術や自分が関心のある技術を発信しているユーザーをTwitterでフォローしたり、ブログをRSSリーダーで購読したりですかね。
|
4
a
answer
CHANGED
|
@@ -91,4 +91,12 @@
|
|
|
91
91
|
```
|
|
92
92
|
上記コードでエラーが出る原因は、前述の通り、`Link`コンポーネントを使用している`NavigationMenu`コンポーネントが`BrowserRouter`の内側ではなく外側にあるからです。
|
|
93
93
|
|
|
94
|
-
以上をふまえて、ご自身のコードを見直してみてください。
|
|
94
|
+
以上をふまえて、ご自身のコードを見直してみてください。
|
|
95
|
+
|
|
96
|
+
> React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている（npmパッケージ等が古くなっている等）などがあり、どうにもわからない状態です。
|
|
97
|
+
|
|
98
|
+
[https://github.com/ReactTraining/react-router
|
|
99
|
+
](https://github.com/ReactTraining/react-router)
|
|
100
|
+
[https://reacttraining.com/react-router/web/guides/philosophy](https://reacttraining.com/react-router/web/guides/philosophy)
|
|
101
|
+
|
|
102
|
+
普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。
|
3
a
answer
CHANGED
|
@@ -88,4 +88,7 @@
|
|
|
88
88
|
</Fragment>,
|
|
89
89
|
document.getElementById("root")
|
|
90
90
|
);
|
|
91
|
-
```
|
|
91
|
+
```
|
|
92
|
+
上記コードでエラーが出る原因は、前述の通り、`Link`コンポーネントを使用している`NavigationMenu`コンポーネントが`BrowserRouter`の内側ではなく外側にあるからです。
|
|
93
|
+
|
|
94
|
+
以上をふまえて、ご自身のコードを見直してみてください。
|
2
a
answer
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
# 前提
|
|
2
|
+
質問に掲載されているコードは、質問と関係ない部分のコードが大量に含まれており、回答する上で回答しづらいので、簡易的なサンプルコードを解説用に作成しました。それをもとに以下、回答となりますので、元のコードと置き換えて参考になさってくださいませ。
|
|
3
|
+
|
|
1
4
|
# サンプルコード
|
|
2
5
|
```ここに言語を入力
|
|
3
6
|
import React, { Component, Fragment } from "react";
|
|
@@ -47,4 +50,42 @@
|
|
|
47
50
|
](https://codesandbox.io/s/kw3n127wy7)
|
|
48
51
|
|
|
49
52
|
# 解説
|
|
53
|
+
|
|
54
|
+
> `You should not use <Link> outside a <Router>`
|
|
55
|
+
|
|
56
|
+
と、エラーが出ているので、このエラーを素直に捉えれば、`You should use <Link> inside <Router>`ということになり、つまり、「`Link`コンポーネントは`Router`コンポーネントの中で使ってくださいね」ということになります。
|
|
57
|
+
|
|
58
|
+
上のサンプルコードの場合は、`NavigationMenu`コンポーネントの中で`Link`コンポーネントを使っていますので、`NavigationMenu`コンポーネント自体が`BrowserRouter`コンポーネント以下の階層で使われている必要があります。
|
|
59
|
+
|
|
50
|
-
|
|
60
|
+
```
|
|
61
|
+
// 正常
|
|
62
|
+
ReactDOM.render(
|
|
63
|
+
<BrowserRouter>
|
|
64
|
+
<Fragment>
|
|
65
|
+
<NavigationMenu />
|
|
66
|
+
<Switch>
|
|
67
|
+
<Route exact path="/" component={Home} />
|
|
68
|
+
<Route exact path="/about" component={About} />
|
|
69
|
+
</Switch>
|
|
70
|
+
</Fragment>
|
|
71
|
+
</BrowserRouter>,
|
|
72
|
+
document.getElementById("root")
|
|
73
|
+
);
|
|
74
|
+
```
|
|
75
|
+
サンプルコードの上記部分を以下に置き換えた場合、質問に掲載されているエラーが生じることになります。
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
// エラー
|
|
79
|
+
ReactDOM.render(
|
|
80
|
+
<Fragment>
|
|
81
|
+
<NavigationMenu />
|
|
82
|
+
<BrowserRouter>
|
|
83
|
+
<Switch>
|
|
84
|
+
<Route exact path="/" component={Home} />
|
|
85
|
+
<Route exact path="/about" component={About} />
|
|
86
|
+
</Switch>
|
|
87
|
+
</BrowserRouter>
|
|
88
|
+
</Fragment>,
|
|
89
|
+
document.getElementById("root")
|
|
90
|
+
);
|
|
91
|
+
```
|
1
https://codesandbox.io/s/kw3n127wy7
answer
CHANGED
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
);
|
|
44
44
|
|
|
45
45
|
```
|
|
46
|
+
Demo => [https://codesandbox.io/s/kw3n127wy7
|
|
47
|
+
](https://codesandbox.io/s/kw3n127wy7)
|
|
46
48
|
|
|
47
49
|
# 解説
|
|
48
50
|
※ 編集中
|