반응에서 점프 페이지를 구현하는 방법

반응에서 페이지 점프를 구현하는 방법: 1. 'antd'에서 {Button} 가져오기;"를 통해 버튼 구성 요소를 도입합니다. 2. 버튼 구성 요소 내부에 onclick을 작성합니다. 3. 렌더링 외부에 메소드 콘텐츠를 "tiaozhuan( ) {window.location.href=""}"; 4. 링크 라우팅을 사용합니다. 5. a 태그를 사용하여 점프합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 페이지 점프를 구현하는 방법은 무엇입니까?

react 프로젝트는 페이지 점프를 구현합니다

업데이트:

useNavigate() 사용법

import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  navigate(-1)//适用于返回上级页面
  navigate('/router');//也可直接加路径

1. 버튼 구성 요소 사용

첫 번째 인용문

import { Button } from 'antd';

을 사용한 다음 버튼 구성 요소 내부에 onclick을 쓰고 렌더링 콘텐츠 외부에 메소드를 작성하세요

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}>跳转页面</Button>
      </>
  );  }
};
export default App;

2. 링크 라우팅을 사용하세요

첫번째 인용

import { Link } from 'umi';

그런 다음 이 라우팅 파일에 점프하고 싶은 페이지에 경로를 추가하세요

그런 다음 답장에 이 문장을 쓰세요.

<Link to="/test">跳转页面</Link>

3. 가장 간단한 것은 a 태그입니다

<a href="#">跳转页面</a>

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 점프 페이지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!