在 React 中重定向到外部 URL

作者

在 React 中重定向到外部 URL

Redirect to an External URL in React

使用该window.location.replace()方法重定向到 React 中的外部 url，例如window.location.replace('https://google.com'). 如果满足特定条件，您可以通过调用该replace()方法以编程方式将当前资源替换为提供的 URL。

应用程序.js
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 />

        {/* 👇️ If you need to simply link to external URL */}
        <a href="https://google.com" target="_blank" rel="noreferrer">
          Google.com
        </a>
      </div>

      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function About() {
  // 👇️ redirect to external URL
  window.location.replace('https://google.com');

  return null;
}

反应重定向外部网址

/about当用户导航到路由时，代码片段重定向到外部 URL
。

这可以是任何其他条件，也可以在if语句中使用。

您可以使用
location.replace()
方法将当前资源替换为提供的 URL。

使用该replace()方法时，当前页面不会保存在会话历史中。

换句话说，用户将无法使用后退按钮导航到它。

我们希望避免这种行为，因为如果用户导航回
/about路线，他们将google.com再次被重定向到并且他们将无法使用后退按钮功能。

如果您想让用户返回到重定向他们的页面，请使用
window.location.href代替window.location.replace。

应用程序.js
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 />

        {/* 👇️ If you need to simply link to external URL */}
        <a href="https://google.com" target="_blank" rel="noreferrer">
          Google.com
        </a>
      </div>

      <br />

      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function About() {
  // 👇️ using window.location.href 👇️
  window.location.href = 'https://google.com';
  return null;
}

使用window.location.hrefinstead ofwindow.location.replace是不同的，因为它允许用户返回到重定向他们的路由。

在这种特殊情况下，如果用户单击返回，他们将
google再次被重定向到。

请注意，如果您需要简单地链接到外部 URL，则可以使用<a>
标签。

应用程序.js
export default function App() {
  return (
    <a href="https://google.com" target="_blank" rel="noreferrer">
      Google.com
    </a>
  );
}

React 路由器Link组件旨在仅用于内部导航。

当元素target上的属性设置为时，外部链接将在新选项卡中打开。如果您想在同一选项卡中打开外部 URL，您可以删除该属性。a_blank

–

发表评论