在 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.