由于我在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 Router v6相关的答案来处理动态路由。
我创建了一个名为redirect的通用组件:
export default function Redirect(params) {
window.location.replace('<Destination URL>' + "/." params.destination);
return (
<div />
)
}
然后我在路由器文件中调用它:
<Route path='/wheretogo' element={<Redirect destination="wheretogo"/>}/>
其他回答
我提供了一个与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"/>}/>
为了扩展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
}}/>
使用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()等。
你可以使用你的动态URL:
<Link to={{pathname:`${link}`}}>View</Link>
我认为最好的解决方案是使用普通的<a>标记。其他一切似乎都令人费解。React路由器是为单页应用程序中的导航而设计的，因此将它用于其他任何事情都没有多大意义。为已经内置在<a>标签中的东西制作整个组件似乎…傻吗?
