迹忆客 专注技术分享

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

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;
}

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

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

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

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

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

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

如果我们想让用户返回重定向他们的页面，请使用 window.location.href 而不是 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;
}

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

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

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

export default function App() {
  return (
    <a href="https://www.jiyik.com" target="_blank" rel="noreferrer">
      Google.com
    </a>
  );
}

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

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