質問編集履歴
4
typescript code
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
3
エラーメッセージの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,10 +9,6 @@
|
|
|
9
9
|
``<BrowserRouter><Tag></BrowserRouter>`` という風にBrowserRouterの子要素のコンポーネントとして書かないと
|
|
10
10
|
|
|
11
11
|
エラーが出てしまわないように `useRouter`フラグで `<Link>`と`<a>`を切り替えるような実装にしました。
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
12
|
|
|
17
13
|
|
|
18
14
|
|
|
@@ -73,3 +69,35 @@
|
|
|
73
69
|
恐らく`context`を駆使してごちゃごちゃすればできそうな気もしますが、ちょっと触ったことがないですし、
|
|
74
70
|
|
|
75
71
|
そもそももっと簡単に記述する方法があるかもしれず質問させていただきました。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
ちなみにもしstorybookでそのまま<Link>を使おうとすると以下のエラーが出ます
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Invariant Violation: You should not use <Link> outside a <Router>
|
|
82
|
+
|
|
83
|
+
at invariant (http://localhost:6006/static/preview.bundle.js:6918:15)
|
|
84
|
+
|
|
85
|
+
at Link.render (http://localhost:6006/static/preview.bundle.js:52978:54)
|
|
86
|
+
|
|
87
|
+
at finishClassComponent (http://localhost:6006/static/preview.bundle.js:42252:31)
|
|
88
|
+
|
|
89
|
+
at updateClassComponent (http://localhost:6006/static/preview.bundle.js:42229:12)
|
|
90
|
+
|
|
91
|
+
at beginWork (http://localhost:6006/static/preview.bundle.js:42608:16)
|
|
92
|
+
|
|
93
|
+
at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:44576:16)
|
|
94
|
+
|
|
95
|
+
at workLoop (http://localhost:6006/static/preview.bundle.js:44685:28)
|
|
96
|
+
|
|
97
|
+
at HTMLUnknownElement.callCallback (http://localhost:6006/static/preview.bundle.js:33302:14)
|
|
98
|
+
|
|
99
|
+
at Object.invokeGuardedCallbackDev (http://localhost:6006/static/preview.bundle.js:33341:16)
|
|
100
|
+
|
|
101
|
+
at invokeGuardedCallback (http://localhost:6006/static/preview.bundle.js:33198:27)
|
|
102
|
+
|
|
103
|
+
```
|
2
タイトルの変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
react-routerの
|
|
1
|
+
react-routerの<Link>と<a>の自動切り替え方法（もしくはそもそもの書き方が違う場合はご指摘いただきたく）
|
test
CHANGED
|
File without changes
|
1
質問内容の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
react用のコンポーネントの開発にstorybookを使っています。
|
|
2
2
|
|
|
3
|
-
そこでreacto-router-domとの連携を考慮して以下のようなコー
|
|
3
|
+
そこでreacto-router-domとの連携を考慮して以下のようなコンポーネントを作りました。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
storyboard上では以下のTagコンポーネントをテストするのに
|
|
8
|
+
|
|
9
|
+
``<BrowserRouter><Tag></BrowserRouter>`` という風にBrowserRouterの子要素のコンポーネントとして書かないと
|
|
10
|
+
|
|
11
|
+
エラーが出てしまわないように `useRouter`フラグで `<Link>`と`<a>`を切り替えるような実装にしました。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
4
16
|
|
|
5
17
|
|
|
6
18
|
|
|
@@ -52,10 +64,12 @@
|
|
|
52
64
|
|
|
53
65
|
|
|
54
66
|
|
|
55
|
-
|
|
67
|
+
ですが出来れば、`<Tag>`自身が `<BrowserRouter>`の子要素として設定されているかどうかを判定して
|
|
56
68
|
|
|
57
|
-
切り替えにuseRouterを
|
|
69
|
+
`<Link>`と`<a>`を切り替えるような挙動にしたいのです(一々`useRouterフラグを使いたくない`)
|
|
58
70
|
|
|
59
|
-
内部的にRouterの配下にあるか調べて自動的にLinkを使うか<a>を使うか選択させたいのですが
|
|
60
71
|
|
|
72
|
+
|
|
73
|
+
恐らく`context`を駆使してごちゃごちゃすればできそうな気もしますが、ちょっと触ったことがないですし、
|
|
74
|
+
|
|
61
|
-
|
|
75
|
+
そもそももっと簡単に記述する方法があるかもしれず質問させていただきました。
|