react如何實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面

這篇文章主要介紹“react如何實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“react如何實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面”文章能幫助大家解決問(wèn)題。

react實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面的方法：1、通過(guò)“import { Button } from 'antd';”引入button組件；2、在button組件里面寫(xiě)onclick；3、在render外面寫(xiě)方法內(nèi)容為“tiaozhuan(){window.location.href=""}”；4、使用link路由；5、使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)即可。

react項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

更新：

useNavigate（）的使用

import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  navigate(-1)//適用于返回上級(jí)頁(yè)面
  navigate('/router');//也可直接加路徑

1.使用button組件

首先引用

import { Button } from 'antd';

然后在button組件里面寫(xiě)onclick，在render外面寫(xiě)方法內(nèi)容

class App extends Component {
tiaozhuan(){
    window.location.href="http://www.baidu.com"
   }
  render(){
  return (
    <>
    <div id="zhu" style={{ width: 400, height: 400 }}></div>
    <div id="zhe" style={{width: 600,height:400}}></div>
      <p>123 </p>
       <Button onClick={this.tiaozhuan}>跳轉(zhuǎn)頁(yè)面</Button>
      </>
  );  }
};
export default App;

2.使用link路由

首先引用

import { Link } from 'umi';

然后在這個(gè)路由文件里加上你要跳轉(zhuǎn)頁(yè)面的路由

接著在return里面寫(xiě)這句話就行了。

<Link to="/test">跳轉(zhuǎn)頁(yè)面</Link>

3.最簡(jiǎn)單的是a標(biāo)簽

<a href="#">跳轉(zhuǎn)頁(yè)面</a>

關(guān)于“react如何實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。