質問編集履歴
4
typescript code
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
3
エラーメッセージの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
``<BrowserRouter><Tag></BrowserRouter>`` という風にBrowserRouterの子要素のコンポーネントとして書かないと
|
|
6
6
|
エラーが出てしまわないように `useRouter`フラグで `<Link>`と`<a>`を切り替えるような実装にしました。
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
8
|
```typescript
|
|
11
9
|
import * as React from 'react';
|
|
12
10
|
import { Link } from 'react-router-dom';
|
|
@@ -35,4 +33,20 @@
|
|
|
35
33
|
`<Link>`と`<a>`を切り替えるような挙動にしたいのです(一々`useRouterフラグを使いたくない`)
|
|
36
34
|
|
|
37
35
|
恐らく`context`を駆使してごちゃごちゃすればできそうな気もしますが、ちょっと触ったことがないですし、
|
|
38
|
-
そもそももっと簡単に記述する方法があるかもしれず質問させていただきました。
|
|
36
|
+
そもそももっと簡単に記述する方法があるかもしれず質問させていただきました。
|
|
37
|
+
|
|
38
|
+
ちなみにもしstorybookでそのまま<Link>を使おうとすると以下のエラーが出ます
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
Invariant Violation: You should not use <Link> outside a <Router>
|
|
42
|
+
at invariant (http://localhost:6006/static/preview.bundle.js:6918:15)
|
|
43
|
+
at Link.render (http://localhost:6006/static/preview.bundle.js:52978:54)
|
|
44
|
+
at finishClassComponent (http://localhost:6006/static/preview.bundle.js:42252:31)
|
|
45
|
+
at updateClassComponent (http://localhost:6006/static/preview.bundle.js:42229:12)
|
|
46
|
+
at beginWork (http://localhost:6006/static/preview.bundle.js:42608:16)
|
|
47
|
+
at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:44576:16)
|
|
48
|
+
at workLoop (http://localhost:6006/static/preview.bundle.js:44685:28)
|
|
49
|
+
at HTMLUnknownElement.callCallback (http://localhost:6006/static/preview.bundle.js:33302:14)
|
|
50
|
+
at Object.invokeGuardedCallbackDev (http://localhost:6006/static/preview.bundle.js:33341:16)
|
|
51
|
+
at invokeGuardedCallback (http://localhost:6006/static/preview.bundle.js:33198:27)
|
|
52
|
+
```
|
2
タイトルの変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
react-routerの
|
|
1
|
+
react-routerの<Link>と<a>の自動切り替え方法（もしくはそもそもの書き方が違う場合はご指摘いただきたく）
|
body
CHANGED
|
File without changes
|
1
質問内容の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
react用のコンポーネントの開発にstorybookを使っています。
|
|
2
|
-
そこでreacto-router-domとの連携を考慮して以下のようなコー
|
|
2
|
+
そこでreacto-router-domとの連携を考慮して以下のようなコンポーネントを作りました。
|
|
3
3
|
|
|
4
|
+
storyboard上では以下のTagコンポーネントをテストするのに
|
|
5
|
+
``<BrowserRouter><Tag></BrowserRouter>`` という風にBrowserRouterの子要素のコンポーネントとして書かないと
|
|
6
|
+
エラーが出てしまわないように `useRouter`フラグで `<Link>`と`<a>`を切り替えるような実装にしました。
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
4
10
|
```typescript
|
|
5
11
|
import * as React from 'react';
|
|
6
12
|
import { Link } from 'react-router-dom';
|
|
@@ -25,7 +31,8 @@
|
|
|
25
31
|
};
|
|
26
32
|
```
|
|
27
33
|
|
|
34
|
+
ですが出来れば、`<Tag>`自身が `<BrowserRouter>`の子要素として設定されているかどうかを判定して
|
|
28
|
-
|
|
35
|
+
`<Link>`と`<a>`を切り替えるような挙動にしたいのです(一々`useRouterフラグを使いたくない`)
|
|
29
|
-
|
|
36
|
+
|
|
30
|
-
|
|
37
|
+
恐らく`context`を駆使してごちゃごちゃすればできそうな気もしますが、ちょっと触ったことがないですし、
|
|
31
|
-
|
|
38
|
+
そもそももっと簡単に記述する方法があるかもしれず質問させていただきました。
|