teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

typescript code

2017/10/18 04:17

投稿

m0a
m0a

スコア708

title CHANGED
File without changes
body CHANGED
File without changes

3

エラーメッセージの追加

2017/10/18 04:17

投稿

m0a
m0a

スコア708

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

タイトルの変更

2017/10/17 04:04

投稿

m0a
m0a

スコア708

title CHANGED
@@ -1,1 +1,1 @@
1
- react-routerのlinkコンポーネントanchrの自動切り替え方法につ
1
+ react-routerの<Link><a>の自動切り替え方法(もしくはそもそもの書き方が違う場合はご指摘ただきたく)
body CHANGED
File without changes

1

質問内容の改善

2017/10/17 03:57

投稿

m0a
m0a

スコア708

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
- まずこの書き方が正しいのかいう問題もあますし、 なぜこいう書き方をしたかとうとLinkコンポーネントはstorybook動かないからですが
35
+ `<Link>``<a>`を切替えるよな挙動にしたいす(一々`useRouterフラグを使いたくない`)
29
- 切り替えにuseRouterを設定するのが若干面倒くさいと考えています。
36
+
30
- 内部的にRouterの配下にあるか調べて自動的にLinkを使うか<a>を使うか選択させたいです
37
+ 恐らく`context`使してごちゃごちゃすればできそな気もしますが、ちょっと触っことがないですし、
31
- どうすれいんでょうか?
38
+ そもそももっと簡単に記述る方法があるかもしず質問させてただきまた。