由于我在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 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>
其他回答
我不认为React路由器提供这种支持。文档中提到
重定向>设置重定向到应用程序中的另一个路由，以维护旧的url。
你可以尝试使用类似React-Redirect的东西。
我很幸运:
<Route
path="/example"
component={() => {
global.window && (global.window.location.href = 'https://example.com');
return null;
}}
/>
补充一下Víctor Daniel的回答:链接的路径名实际上只有在链接前有“https://'”或“http://'”时才会把你带到外部链接。
您可以执行以下操作:
<Link to={{ pathname:
> "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
> }} target="_blank" />
或者如果你的URL没有'https://'， '，我会这样做:
<Link to={{pathname:`https://${link}`}} target="_blank" />
否则它将位于当前基路径的前面，如Lorenzo Demattécommented。
不需要使用React Router中的<Link />组件。
如果你想去外部链接使用锚标签。
<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>
为了扩展Alan的回答，您可以创建一个<Route/>，它将所有包含“http:”或“https:”属性的<Link/>重定向到正确的外部资源。
下面是一个可以直接放在<Router>中的工作示例。
<Route path={['/http:', '/https:']} component={props => {
window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
return null
}}/>
