web-dev-qa-db-ja.com

ReactJs this.props.router undefined

こんにちは、私はReact jsを学習しています。問題に遭遇しました。reactrouterを使用してメインページに戻ろうとすると、次のエラーが発生します。

Uncaught TypeError：未定義のプロパティ 'Push'を読み取れません

これは私のコードです。ご覧のとおり、navigate関数を呼び出しています。

enter image description here

ルーター付きのclient.js：

enter image description here

this.props.router.Push('/');をthis.props.history.Push('/');に置き換えると、正常に機能します。何が問題でしょうか？.

javascriptreactjsreact-routerreact-dom
11
August

super()を呼び出すコンストラクターメソッドがありません。 super()は、親クラスのコンストラクターを呼び出し、親クラスのプロパティをこのコンポーネントに適切に渡すために必要です。これは、routerを含め、コンポーネントに渡されるプロパティにアクセスするために必要です。

レイアウトクラスの上部は次のようになります。

export default class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

ES6でクラスがどのように機能するかに関するドキュメントです！

編集1：Reactルーター

this.props.routerを使用してナビゲーションを行う場合も、新しいwithRouterを使用する必要があります。これを行うには、コンポーネントを引数として渡し、それをエクスポートします。 withRouter関数は、コンポーネントをルータープロップをコンポーネントに渡す別のコンポーネントにラップします。プログラムによるルーティングを行う方法は他にもある（シングルトン、コンテキストなど）ことを指摘しておきますが、this.props.router.Pushを使用する場合はwithRouterを使用する必要があります。

import { withRouter } from 'react-router' 
class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

export default withRouter(Layout)

withRouterを使用

26
garrettmaring