Reactで新しいページにジャンプする方法

react で新しいページにジャンプする方法: 1. Ant の Button コンポーネントを適用して、元のページに新しいページを開きます; 2. "handle=()=>{const w= window" を使用します.open('about:blank'); w.location.href="..."}" メソッドは、ローカル ページをクリックして新しいページにジャンプすることを実装します。

#このチュートリアルの動作環境: Windows 10 システム、react18 バージョン、Dell G3 コンピューター。

React で新しいページにジャンプするにはどうすればよいですか?

react クリックすると新しいページにジャンプします

ジャンプメソッド:

実際のフロントエンド開発では、広範囲にフレームワークを利用する必要があります。今日は「reactでクリックして新しいページに飛ぶには？ジャンプ方法！」についてお話しましょう！

方法 1:

元のページで新しいページを開き、Ant で Button コンポーネントを適用します。コードは次のとおりです:

<Button style={{backgroundColor:&#39;#F0F2F5&#39;}} 
  onClick={()=>{window.location.href="https://baidu.com"}}
  className="r-button"
>

その後、インポート { 「react-router-dom」のこのコード文字列を実装すると、元のページに新しいページが開きます。コードは次のとおりです。

<Link to="/new/login/">
<Button className="e-button" type="primary">Back to login page</Button>
</Link>

方法 2:

ローカル ページをクリックすると、新しいページにジャンプします。コードは次のとおりです。

<Button style={{backgroundColor:&#39;#F0F2F5&#39;}} 
onClick={this.handle}
className="last-button"
>
handle=()=>{
  const w=window.open(&#39;about:blank&#39;);
  w.location.href="www.baidu.com"
}

概要:

以上です「reactでクリックして新しいページに飛ぶには？ジャンプ方法！」についてのいくつかの方法 もちろん、より良い実装方法があれば、それをみんなに共有することもできます！ React 入門コースでは、React フレームワークに関するその他の知識を購入して学ぶことができ、実用的な情報と実践的な経験の両方が、迅速な上達に役立ちます。

推奨される学習: 「react ビデオ チュートリアル 」

以上がReactで新しいページにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。