React コンポーネントに history がないときに確認すること

ReactJS を使ってシングルページアプリケーション（SPA）を作成する際、コンポーネント内に props.history が見当たらないことがあります。

$ tsc

src/components/User/Upsert.tsx:53:16 - 
error TS2339: Property 'history' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

53     this.props.history.push('/user/list');
                  ~~~~~~~
プロパティ 'history' は型 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' に存在しません。

例えば CRUD (DBMS) 操作を行った直後にリダイレクトを行う際などに、このエラーが生じるとページ遷移も DOM の書き換えも行われません。

そこでエラー表示を少し調べてみると this.props.history が見当たらないことはありえないとか、withRouter を使ってリダイレクトする方法があるなど、いろいろな(自然)言語で好き勝手なことが書かれていることが分かります。

しかし、このエラー表示が生じた環境において TypeScript をお使いの場合、コンポーネント、つまり props や state の各変数の型定義が行われていないことを最初に疑った方が良いかも知れません。

つまり interface にてコンポーネント内の変数の型を自身で定義して React.Component <{},{}> に渡すと問題が解決する場合があります。

以下に具体例を提示します。

interface IProps {
  history:string[],
}

interface IState {
  params:Array<object>,
}

class Upsert extends React.Component<IProps,IState> {
  constructor(props){
    super(props);
    this.state ={
      params:[],
    }
  }

}
export default Upsert;

少し考えてみると自明なことなのですが、ドキュメントを読み返してみても原因らしきものが思い当たらなくて困惑しました。最終的に解決に役立ったのはこちらです。

---

TypeScript and React – Hello React and TypeScript
https://charles-bryant.gitbook.io/hello-react-and-typescript/typescriptandreact

---

実行環境は下記のとおりになります。

$ tsc --version
Version 2.9.2

$ node --version
v12.16.3

$ npm --version
6.14.8

$ grep react package.json 
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "react-select": "^3.1.0",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "@types/react-router": "^5.1.8",
    "eslint-plugin-react": "^7.21.1",
    "react-devtools": "^4.8.2",

この分野は変化が激しく、毎年のように仕様が変わるので解決法をお探しのかたは記事の書かれた時期とバージョンに細心の注意を払ってください。

最後に繰り返しになりますが、私はスクリプト言語もフロントエンドも心の底から嫌いです。嫌いなので仕事では絶対に触りたくありません。