Redirecting to an external URL in React
Use window.location.replace()the redirect method to redirect to an external URL in React, for example . We can programmatically replace the current resource with the provided URL window.location.replace('https://www.jiyik.com')by calling the method if a certain condition is met .replace()
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom';
export default function App() {
return (
<Router>
<div>
<Link to="/about">About</Link>
<br />
<br />
{/* 👇️ 如果需要简单地链接到外部 URL */}
<a href="https://www.jiyik.com" target="_blank" rel="noreferrer">
Jiyik.com
</a>
</div>
<Routes>
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
function About() {
// 👇️ 重定向到外部url
window.location.replace('https://www.jiyik.com');
return null;
}
When a user navigates to /aboutthe route, the code snippet redirects to the external URL.
This can be any other condition and can also be used in an if statement.
We can use location.replace()the method to replace the current resource with the provided URL.
When using
replace()the method, the current page is not saved in the session history.
In other words, users won't be able to navigate to it using the back button.
We want to avoid this behavior because if the user navigates back to /aboutthe route, they will be redirected to www.jiyik.com again and they will not be able to use the back button functionality.
If we want to get the user back to the page that redirected them, use window.location.hrefinstead window.location.replace.
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom';
export default function App() {
return (
<Router>
<div>
<Link to="/about">About</Link>
<br />
<br />
{/* 👇️ 如果需要简单地链接到外部 URL */}
<a href="https://www.jiyik.com" target="_blank" rel="noreferrer">
Jiyik.com
</a>
</div>
<br />
<Routes>
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
function About() {
// 👇️ 使用 window.location.href 👇️
window.location.href = 'https://www.jiyik.com';
return null;
}
Using window.location.hrefinstead of window.location.replaceis different because it allows the user to go back to the route that redirected them.
In this particular case, if the user clicks back, they will be redirected to Google again.
Note that if you need to simply link to an external URL, you can use <a>the <head> tag.
export default function App() {
return (
<a href="https://www.jiyik.com" target="_blank" rel="noreferrer">
Google.com
</a>
);
}
The React router-link component is intended to be used for internal navigation only.
When the target attribute aof the element is set to , external links will be opened in a new tab. You can remove the attribute if you want the external URL to open in the same tab._blank
For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.
Related Articles
Redirection in PHP
Publish Date：2025/04/13 Views：158 Category：PHP
-
header() We will demonstrate another way to redirect a page in PHP using the function by sending an HTTP header to the browser . This method uses the built-in header() function in PHP, which takes Location as a parameter, and its value is t
How to Append Text to a File Using Bash
Publish Date：2025/04/05 Views：83 Category：OPERATING SYSTEM
-
We can use the redirection ( ) operator and tee the command to append text to a file. We have to make sure we have enough permissions to add text to the file. If we don't have enough permissions, we may get a permission denied error. Use th
Redirecting Stderr and Stdout to a file in Bash
Publish Date：2025/03/23 Views：187 Category：OPERATING SYSTEM
-
In this article, we will discuss standard output and standard error in Linux. We will see how to redirect standard output and standard error in Bash. Let us start by understanding the terms standard output and standard error in Linux. Stand
How to avoid cross-origin (CORS) issues in React/Next.js
Publish Date：2025/03/17 Views：170 Category：NETWORK
-
In this article, we will introduce how to avoid cross-origin (CORS) issues in React/Next.js. Cross-origin resource sharing (CORS) is a protocol that defines how web requests should be handled when crossing different URLs.
React Tutorial - Transferring Props
Publish Date：2025/03/16 Views：188 Category：React
-
React transfers Props. Props are generated when components are encapsulated. Components expose some properties (Props) to the outside world to complete some functions.
React Tutorial: Props Anti-Pattern
Publish Date：2025/03/16 Views：187 Category：React
-
React's Props anti-pattern, using Props to generate state in getInitialState is an anti-pattern - Anti-Pattern.
React Tutorial - Props Validation
Publish Date：2025/03/16 Views：102 Category：React
-
Props validation is a very useful way to use components correctly. It can avoid many bugs and problems as your application becomes more and more complex. In addition, it can make your program more readable.
React tutorial: Types of Props for child components
Publish Date：2025/03/16 Views：172 Category：React
-
Usually, the child components of a React component are a group, that is, the child components are an array. Introduction to Type of the Children Props.
How to solve the error Uncaught TypeError: Cannot read properties of undefined in
Publish Date：2025/03/16 Views：153 Category：React
-
In the process of React development, we often encounter some errors. Here we look at an error reported in App.js. The error is as follows: App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState') at onInput
