由于我在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"
}
当前回答
最简单的解决方案是使用渲染函数并更改window.location。
<Route path="/goToGoogle"
render={() => window.location = "https://www.google.com"} />
如果你想要一个小型的可重用组件，你可以像这样提取它:
const ExternalRedirect = ({ to, ...routeProps }) => {
return <Route {...routeProps} render={() => window.location = to} />;
};
然后像这样使用它(例如在你的路由器开关中):
<Switch>
...
<ExternalRedirect exact path="/goToGoogle" to="https://www.google.com" />
</Switch>
其他回答
你可以使用你的动态URL:
<Link to={{pathname:`${link}`}}>View</Link>
它不需要请求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');
我很幸运:
<Route
path="/example"
component={() => {
global.window && (global.window.location.href = 'https://example.com');
return null;
}}
/>
使用React和TypeScript，你会得到一个错误，因为函数必须返回一个React元素，而不是void。所以我这样做，使用Route渲染方法(并使用React路由器v4):
redirectToHomePage = (): null => {
window.location.reload();
return null;
};
<Route exact path={'/'} render={this.redirectToHomePage} />
你也可以使用window.location.assign()， window.location.replace()等。
我不认为React路由器提供这种支持。文档中提到
重定向>设置重定向到应用程序中的另一个路由，以维护旧的url。
你可以尝试使用类似React-Redirect的东西。
