React-Router外部链路

由于我在React应用程序中使用React路由器来处理我的路由，我很好奇是否有一种方法可以重定向到外部资源。

比如有人打人:

example.com/privacy-policy

我希望它重定向到:

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我发现在我的index.html加载中，避免用纯JavaScript编写它完全没有任何帮助:

if (window.location.path === "privacy-policy"){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

当前回答

它不需要请求React路由器。这个操作可以在本地完成，由浏览器提供。

只需使用window.location。

React挂钩

const RedirectPage = () => {
  React.useEffect(() => {
    window.location.replace('https://www.google.com')
  }, [])
}

使用React类组件

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('https://www.google.com')
  }
}

另外，如果你想在一个新标签中打开它:

window.open('https://www.google.com', '_blank');

其他回答

我也遇到过同样的问题。我希望我的投资组合重定向到社交媒体处理。之前我使用了"react-router-dom"中的{Link}。重定向到这里的子目录，

链接可用于在网站内路由网页。如果我们想重定向到一个外部链接，那么我们应该使用一个锚标记。像这样,

我提供了一个与React Router v6相关的答案来处理动态路由。

我创建了一个名为redirect的通用组件:

export default function Redirect(params) {
  window.location.replace('<Destination URL>' + "/." params.destination);

  return (
    <div />

  )
}

然后我在路由器文件中调用它:

<Route path='/wheretogo' element={<Redirect destination="wheretogo"/>}/>

我自己解决了这个问题(在我的web应用程序中)，通过添加一个锚标记，而不是使用React路由器的任何东西，只是一个普通的锚标记和一个链接，正如你可以在图片截图中看到的，在一个React应用程序中使用锚标记而不使用React路由器

基本上，你不会将你的用户路由到你的应用程序中的另一个页面，所以你不能使用内部路由器，而是使用一个正常的锚。

虽然这是一个非反应本机解决方案，但您可以尝试。

在React Route V6中，渲染道具被移除。它应该是一个重定向组件。

重定向网址：

const RedirectUrl = ({ url }) => {
  useEffect(() => {
    window.location.href = url;
  }, [url]);

  return <h5>Redirecting...</h5>;
};

路线:

<Routes>
   <Route path="/redirect" element={<RedirectUrl url="https://google.com" />} />
</Routes>

我认为最好的解决方案是使用普通的<a>标记。其他一切似乎都令人费解。React路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情都没有多大意义。为已经内置在<a>标签中的东西制作整个组件似乎…傻吗?

推荐文章