How to jump to a new page in react

How to jump to a new page in react: 1. Open a new page on the original page by applying the Button component in ant; 2. Use "handle=()=>{const w= window.open('about:blank'); w.location.href="..."}" method implements clicking on the local page to jump to a new page.

#The operating environment of this tutorial: Windows 10 system, react18 version, Dell G3 computer.

How to jump to a new page in react?

react Click to jump to a new page

Jump method:

In the actual front-end development, we need to use the framework in a wide range of places. Today Let’s talk about “How to click to jump to a new page in react? Jump method!”!

Method 1:

Open a new page in the original page, we apply the Button component in ant; the code is as follows:

<Button style={{backgroundColor:&#39;#F0F2F5&#39;}} 
  onClick={()=>{window.location.href="https://baidu.com"}}
  className="r-button"
>

After that, import {Link} This string of code from 'react-router-dom' can be implemented, and a new page will be opened on the original page. The code is as follows:

<Link to="/new/login/">
<Button className="e-button" type="primary">Back to login page</Button>
</Link>

Method 2:

The local page jumps to a new page by clicking on it, the code is as follows:

<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"
}

Summary:

That’s it A few methods on "How to click to jump to a new page in react? Jump method!" Of course, if you have a better implementation method, you can share it with everyone! We can purchase and learn other knowledge about the react framework in the React introductory course. The practical information and practical experience are both available to help you improve quickly.

Recommended learning: "react video tutorial"

The above is the detailed content of How to jump to a new page in react. For more information, please follow other related articles on the PHP Chinese website!