react 怎麼實現跳到新頁面

react實作跳到新頁面的方法：1、透過應用程式ant中的Button元件實作在原來頁面開啟一個新的頁面；2、透過「handle=()=>{const w= window.open('about:blank'); w.location.href="..."}”方法實作本機頁面點擊跳到新的頁面。

本教學操作環境：Windows10系統、react18版、Dell G3電腦。

react 怎麼實現跳到新頁面？

react 點擊跳轉新頁面

跳轉方法：

在前端的實戰開發中我們需要用到框架的地方是比較廣泛的，今天我們就來談談在「react 怎麼點擊跳轉新頁面？跳轉方法！」吧！

方法一：

在原來頁面開啟一個新的頁面，我們透過應用ant 中的Button 元件；程式碼如下：

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

之後在透過import {Link} from 'react-router-dom' 這串程式碼就可以實現了，在原本頁面新開一個頁面。程式碼如下：

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

方法二：

本機頁面透過點擊跳到新的頁面，程式碼如下：

<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中文網其他相關文章！