由于我在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"
}
当前回答
对于V3，虽然对V4也适用。离开Eric的回答，我需要做更多的事情，比如处理本地开发，其中'http'不存在于URL上。我还重定向到同一服务器上的另一个应用程序。
添加到路由器文件:
import RedirectOnServer from './components/RedirectOnServer';
<Route path="/somelocalpath"
component={RedirectOnServer}
target="/someexternaltargetstring like cnn.com"
/>
和组件:
import React, { Component } from "react";
export class RedirectOnServer extends Component {
constructor(props) {
super();
// If the prefix is http or https, we add nothing
let prefix = window.location.host.startsWith("http") ? "" : "http://";
// Using host here, as I'm redirecting to another location on the same host
this.target = prefix + window.location.host + props.route.target;
}
componentDidMount() {
window.location.replace(this.target);
}
render(){
return (
<div>
<br />
<span>Redirecting to {this.target}</span>
</div>
);
}
}
export default RedirectOnServer;
其他回答
对于V3，虽然对V4也适用。离开Eric的回答，我需要做更多的事情，比如处理本地开发，其中'http'不存在于URL上。我还重定向到同一服务器上的另一个应用程序。
添加到路由器文件:
import RedirectOnServer from './components/RedirectOnServer';
<Route path="/somelocalpath"
component={RedirectOnServer}
target="/someexternaltargetstring like cnn.com"
/>
和组件:
import React, { Component } from "react";
export class RedirectOnServer extends Component {
constructor(props) {
super();
// If the prefix is http or https, we add nothing
let prefix = window.location.host.startsWith("http") ? "" : "http://";
// Using host here, as I'm redirecting to another location on the same host
this.target = prefix + window.location.host + props.route.target;
}
componentDidMount() {
window.location.replace(this.target);
}
render(){
return (
<div>
<br />
<span>Redirecting to {this.target}</span>
</div>
);
}
}
export default RedirectOnServer;
它不需要请求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 v6中，组件不可用。相反，现在它支持element。制作一个组件重定向到外部站点，并按所示添加它。
import * as React from 'react';
import { Routes, Route } from "react-router-dom";
function App() {
return(
<Routes>
// Redirect
<Route path="/external-link" element={<External />} />
</Routes>
);
}
function External() {
window.location.href = 'https://google.com';
return null;
}
export default App;
我认为最好的解决方案是使用普通的<a>标记。其他一切似乎都令人费解。React路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情都没有多大意义。为已经内置在<a>标签中的东西制作整个组件似乎…傻吗?
我很幸运:
<Route
path="/example"
component={() => {
global.window && (global.window.location.href = 'https://example.com');
return null;
}}
/>
