web-dev-qa-db-ja.com

TypeScript React：RouteComponentPropsタイプエラーまたは履歴にアクセスできません

私はコンポーネントを作り、それを次のように使用しました...

<TopNav
    loggedIn={global.shared.loggedIn} // false 
    fullName={global.shared.fullName} // ''
    avatar={global.shared.avatarId} // ''
/>

topNavコンポーネント内で、渡した小道具にアクセスできるようにしたいとし、props.historyまたは、更新せずにプログラムでユーザーをナビゲートする他の方法。

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';


interface PropsInterfaceNew {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

interface PropsInterface
  extends RouteComponentProps<PropsInterfaceNew> {}
//                                    ^ Error

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
 const firstName = props.fullName.split(' ')[0]; // I need props.fullName & others
  const search = (event: React.FormEvent) => {
    event.preventDefault();
    props.history.Push('/my/profile'); // I need props.history
  };

エラーは

Type 'PropsInterfaceNew' does not satisfy the constraint '{ avatar?: string | undefined; loggedIn?: string | undefined; fullName?: string | undefined; }'.
  Types of property 'loggedIn' are incompatible.
    Type 'boolean' is not assignable to type 'string | undefined'.ts(2344)

または、以下のように履歴を完全に削除すると、エラーは発生しませんが、履歴にアクセスできません

interface PropsInterface {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...

@hardik置換した場合export { TopNav };と...

  export withRouter(TopNav);
//^ err1      ^err2

新しいエラー2が発生する

statements are not aligned (align)tslint(1)

とエラー1

Declaration or statement expected.ts(1128)
reactjstypescriptreact-router-v4
6
Bill

Hardik Chaudhary の提案に従って小道具を修正できます。RouteComponentPropsの最初の型パラメーターは小道具用ではないため、_interface PropsInterface extends RouteComponentProps { /* ... */ }_を使用する必要があります（ match に使用されます） ）

また、コンポーネントをデフォルトのエクスポートとしてエクスポートする場合は、exportではなく_export default_を使用する必要があります。したがって、コードはexport default withRouter(TopNav);である必要があり、react-routerは期待どおりにコンポーネントに小道具を挿入します。

または、名前付きエクスポートを希望する場合は、_export const_を使用して、ルーターの小道具を挿入してコンポーネントをエクスポートできます。エクスポートという名前の_export {...}_を使用したので、これはおそらくあなたのケースだと思います。

便宜上、コード全体を残して、提案を以下に適用します。

_import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';


interface PropsInterface extends RouteComponentProps {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => { /* ... */ }

// if you prefer default export
export default withRouter(TopNav);

// if you prefer named export
// Note: You must change the name of component above.
export const TopNav = withRouter(TopNav);
_
1
Basix