ページを更新せずに React-Router の URL パラメータを変更する方法は何ですか?-jsチュートリアル-php.cn

ページを更新せずに React-Router の URL パラメータを変更する方法は何ですか?

php中世界最好的语言

リリース： 2018-05-12 10:17:45

オリジナル

3970 人が閲覧しました

今回は React-Router でページを更新せずに Url パラメータを変更する方法を紹介します。 React-Router でページを更新せずに Url パラメータを変更するための注意事項は次のとおりです。ケースを見てみましょう。

問題

今日ページを書いているときに問題を見つけました。それは、次のような React Router の Url パラメーター受け渡し関数の使用です:

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

ログイン後にコピー

公式ドキュメントによると、これはChannelPerPageコンポーネント

this.props.match.params

ログイン後にコピー

を使ってurlパラメータの値を取得するのですが、channelIdが1から2に変わった時など、このURL配下のURLのパラメータ部分だけを変更するとページが更新されないことが分かりました。

解決策

情報を調べた結果、根本的な原因は、プロパティの変更によってコンポーネントが再レンダリングされるのではなく、状態の変更のみがコンポーネントの再レンダリングを引き起こすことであることがわかりました。 URL パラメータは props に属しているため、URL パラメータを変更してもコンポーネントが再レンダリングされることはありません。

後で、React コンポーネントにオーバーライド可能なメソッドがあることを発見しました

componentWillReceiveProps(nextProps) {
 ...
}

ログイン後にコピー

このメソッドは、props が変更されたときに呼び出されるため、このメソッドを使用して nextProps を取得し、変更することができます。コンポーネントを再レンダリングできるように、このメソッドでコンテンツを状態にします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS コールバック関数の使用例の詳細な説明

JS DOM 要素の一般的な追加、削除、変更、検索操作の詳細な説明

以上がページを更新せずに React-Router の URL パラメータを変更する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。