首頁 > web前端 > 前端問答 > react 怎麼實現跳到新頁面

react 怎麼實現跳到新頁面

藏色散人
發布: 2022-12-20 11:27:55
原創
5733 人瀏覽過

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

react 怎麼實現跳到新頁面

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板