react-routerのルートパラメータに安全性を入力できますか?

TSワナビー

TypeScriptを使用してreact-router2.0ルートプロパティに安全にアクセスすることは可能ですか?例えば:

<Router>
  <Route path="/" component={App}>
    <Route path="screenOne" header="Screen One" component={ScreenOne}/>
  </Route>
</Router>

screenOneルートのヘッダー値には「this.props.route.header」を介してアクセスできますが、プロパティがどちらにも存在しないという警告を受け取らずに、それを設定してTypeScriptを使用してアクセスすることはできないようです。プロパティにアクセスするコンポーネントの側面または内部をルーティングします。http://definitelytyped.org/https://github.com/typings/typingsの両方の定義ファイルを調べました

TSワナビー

https://stackoverflow.com/users/2225281/aaronからのコメントに基づいて、これを行うことができるようですが、Typingsの定義を使用すると少し間抜けです。誰かがこれを拡張して改善したり、より良いアイデアを持ったりするかもしれませんが、これは私がこれまでのところ、routes.tsxファイルなどの内部で想定していることです。

//Create a type to limit duplication and help w/refactoring
type Header = string;

//Interface for the injected props. Used by component via 'this.props.route.header'
export interface HeaderRouteInjectedProps extends IInjectedProps {
  route?: IRoute & {
    header: Header
  }
}

//Interface and class to create a new Route type 'HeaderRoute' that requires a header property
interface HeaderRouteProps extends IRouteProps {
  header: Header
}
class HeaderRoute extends React.Component<HeaderRouteProps, {}> { }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ナビゲーションバー、React-Routerのルートからパラメータを取得します

分類Dev

React Routerでは、ブラウザー履歴プッシュを使用するときにルートパラメーターをどのように渡しますか?

分類Dev

react-routerはどのようにプロップ経由で他のコンポーネントにパラメーターを渡しますか?

分類Dev

React-RouterとMeteorは、更新時にパラメーターを使用してルートをレンダリングできません

分類Dev

フロー-入力にフローを使用するreactルーターのhistory.pushにはどのような種類を使用できますか?

分類Dev

Reactルーターリンクで「to」と「onClick」の両方の小道具を安全に使用できますか?

分類Dev

特定の条件でのみReact入力イベントハンドラーを追加できますか?

分類Dev

react-routerのコンポーネントでパラメーターを使用するにはどうすればよいですか?

分類Dev

react router dom v4のコンポーネントでパラメータを取得するにはどうすればよいですか?

分類Dev

React-router5.2がURLからパラメーターを取得できませんでした

分類Dev

react.useCallbackの関数のパラメーターを依存リストに含めることはできますか?

分類Dev

React:コンポーネントコンストラクターは複数のパラメーターを持つことができますか?

分類Dev

react-router v4のルートルートにオプションのパラメーターを設定するにはどうすればよいですか?

分類Dev

React-router:URLの単一のパラメーターを変更します

分類Dev

React Routerからのルートパラメーターを使用してaxiosリクエストを作成し、応答に基づいて状態を更新するにはどうすればよいですか?

分類Dev

React Router-ルートマッチングでパラメーターを制約する方法は?

分類Dev

React Router-ルートマッチングでパラメーターを制約する方法は?

分類Dev

React Router-ルートマッチングでパラメーターを制約する方法は?

分類Dev

react-nativeのthis.handleChangeでイベントパラメーターを渡すことができません

分類Dev

reduxに接続されたReactコンポーネントを使用するときに、型の安全性を維持するにはどうすればよいですか?

分類Dev

react-router-domリンクでパラメーターを渡しますが正常に動作しません

分類Dev

Reactルーターを使用してルートハンドラーでパラメーターを取得するにはどうすればよいですか

分類Dev

jsonを使用して、Reactのcaseswitchステートメントにデータを入力します

分類Dev

どのReactコンポーネントをパラメーターで使用する必要がありますか?

分類Dev

react-redux-フックのドキュメントで、createSelector()を呼び出すときにセレクターのパラメーターが別のパラメトリックセレクターに配置されるのはなぜですか?

分類Dev

React:状態のパラメーターが未定義でないかどうかをどのように確認できますか?

分類Dev

react-routerでクエリパラメータを保持する

分類Dev

useHistory of React Router Domでパラメータを送信する方法は?

分類Dev

React-router:ルーティングされたパラメーターを小道具に変換するにはどうすればよいですか?

Related 関連記事

  1. 1

    ナビゲーションバー、React-Routerのルートからパラメータを取得します

  2. 2

    React Routerでは、ブラウザー履歴プッシュを使用するときにルートパラメーターをどのように渡しますか?

  3. 3

    react-routerはどのようにプロップ経由で他のコンポーネントにパラメーターを渡しますか?

  4. 4

    React-RouterとMeteorは、更新時にパラメーターを使用してルートをレンダリングできません

  5. 5

    フロー-入力にフローを使用するreactルーターのhistory.pushにはどのような種類を使用できますか?

  6. 6

    Reactルーターリンクで「to」と「onClick」の両方の小道具を安全に使用できますか?

  7. 7

    特定の条件でのみReact入力イベントハンドラーを追加できますか?

  8. 8

    react-routerのコンポーネントでパラメーターを使用するにはどうすればよいですか?

  9. 9

    react router dom v4のコンポーネントでパラメータを取得するにはどうすればよいですか?

  10. 10

    React-router5.2がURLからパラメーターを取得できませんでした

  11. 11

    react.useCallbackの関数のパラメーターを依存リストに含めることはできますか?

  12. 12

    React:コンポーネントコンストラクターは複数のパラメーターを持つことができますか?

  13. 13

    react-router v4のルートルートにオプションのパラメーターを設定するにはどうすればよいですか?

  14. 14

    React-router:URLの単一のパラメーターを変更します

  15. 15

    React Routerからのルートパラメーターを使用してaxiosリクエストを作成し、応答に基づいて状態を更新するにはどうすればよいですか?

  16. 16

    React Router-ルートマッチングでパラメーターを制約する方法は?

  17. 17

    React Router-ルートマッチングでパラメーターを制約する方法は?

  18. 18

    React Router-ルートマッチングでパラメーターを制約する方法は?

  19. 19

    react-nativeのthis.handleChangeでイベントパラメーターを渡すことができません

  20. 20

    reduxに接続されたReactコンポーネントを使用するときに、型の安全性を維持するにはどうすればよいですか?

  21. 21

    react-router-domリンクでパラメーターを渡しますが正常に動作しません

  22. 22

    Reactルーターを使用してルートハンドラーでパラメーターを取得するにはどうすればよいですか

  23. 23

    jsonを使用して、Reactのcaseswitchステートメントにデータを入力します

  24. 24

    どのReactコンポーネントをパラメーターで使用する必要がありますか?

  25. 25

    react-redux-フックのドキュメントで、createSelector()を呼び出すときにセレクターのパラメーターが別のパラメトリックセレクターに配置されるのはなぜですか?

  26. 26

    React:状態のパラメーターが未定義でないかどうかをどのように確認できますか?

  27. 27

    react-routerでクエリパラメータを保持する

  28. 28

    useHistory of React Router Domでパラメータを送信する方法は?

  29. 29

    React-router:ルーティングされたパラメーターを小道具に変換するにはどうすればよいですか?

ホットタグ

アーカイブ