Heim > Artikel > Web-Frontend > So implementieren Sie eine Sprungseite in React
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.
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 'umi';
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!