在 React 中重定向到外部 URL

Rana Hasnain Khan 2024年2月15日

React React Redirect

我们将介绍如何在 React 中重定向到外部 URL。

在 React 中重定向到外部 URL

每当我们想要重定向到另一条路径时，我们可以更改状态以重新渲染组件。但有时，我们可能需要重定向到某个外部 URL。

为了理解重定向到外部 URL，我们将展示一个示例。

在本例中，我们将创建一个导航菜单，将用户重定向到某个外部链接。首先，我们将在 index.html 文件中创建一个类 root 的 div。

# react
<div id="root"></div>

接下来，我们将导入 React、render 和 BrowserRouter。

# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

然后，我们将创建一个菜单。

# react
const Menu = () => (
  <div>
    <ul>
      <li>
        <Link to="/privacy-policy">privacy</Link>
      </li>
    </ul>
  </div>
);

现在在 render() 中，我们将返回一个重定向路由。index.js 中的代码将如下所示。

# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Menu = () => (
  <div>
    <ul>
      <li>
        <Link to="/privacy-policy">privacy</Link>
      </li>
    </ul>
  </div>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
    };
  }

  render() {
    return (
      <Router>
        <div>
          <Menu />
          <Route
            path="/privacy-policy"
            component={() => {
              window.location.replace('https://example.com/1234');
              return null;
            }}
          />
        </div>
      </Router>
    );
  }
}

render(<App />, document.getElementById('root'));

输出：

React 重定向

每当用户点击 privacy 菜单时，它将被重定向到外部 URL。

作者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.