Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie eine Sprungseite in React

So implementieren Sie eine Sprungseite in React

藏色散人
藏色散人Original
2023-01-03 09:24:098579Durchsuche

So implementieren Sie den Seitensprung in React: 1. Führen Sie die Schaltflächenkomponente durch „import { Button } from ‚antd‘;“ ein. 2. Schreiben Sie onclick in die Schaltflächenkomponente. 3. Schreiben Sie den Methodeninhalt außerhalb von „render“ als „tiaozhuan( ) {window.location.href=""}"; 4. Link-Routing verwenden; 5. Verwenden Sie das a-Tag zum Springen.

So implementieren Sie eine Sprungseite in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man einen Seitensprung in React? „Reagieren Sie auf das Projekt, um einen Seitensprung zu implementieren.“

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

2. Verwenden Sie das Link-Routing

Erstes Zitat

import { Button } from 'antd';

Dann fügen Sie die Route zu der Seite hinzu, zu der Sie in dieser Routing-Datei springen möchten

Dann schreiben Sie diesen Satz in die Rückgabe.

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;

3. Am einfachsten ist es mit einem Tag

import { Link } from &#39;umi&#39;;

Empfohlenes Lernen: „

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Sprungseite in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn