Redirecting to an external URL in React

Current Location：Home > Learning > WEB FRONT-END > React >

Vue React JavaScript Angular CSS HTML

Redirecting to an external URL in React

Author：JIYIK Last Updated：2025/03/16 Views：

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

Previous：Get the width and height of the window in React

Next：Check if a string is empty in React

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.

Article URL：

React Tutorial - Transferring Props

Publish Date：2025/03/16 Views：185 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：183 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：99 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：170 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：150 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

Why do you need to bind event handlers in React Class Components?

Publish Date：2025/03/16 Views：58 Category：React

When using React, we must have come across control components and event handlers. We need to use `.bind()` in the constructor of the custom component to bind these methods to the component instance. As shown in the following code:

Solution to the error ＂does not contain a default export＂ in React

Publish Date：2025/03/16 Views：187 Category：React

When we try to use `default import` to import from a module that does not have a `default export`, we get a "does not contain a default export" error. To fix the error, make sure the module has named exports and wrap the import in curly braces, e.g.

Error in React: Attempted import error 'X' is not exported from Solution

Publish Date：2025/03/16 Views：76 Category：React

In React, the error “Attempted import error 'X' is not exported from” in React.js occurs when we try to import a named import that does not exist in the specified file. To fix the error, make sure the module has named exports and you have not obfu

Solve the Module not found: Can't resolve 'react-bootstrap' error

Publish Date：2025/03/16 Views：85 Category：React

To resolve the error "Module not found: Error: Can't resolve 'react-bootstrap'", make sure to install the react-bootstrap package by opening a terminal in the root directory of the project and running the command `npm install react-bootstrap bootstrap

JIYIK CN >