由于我在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路由器。这个操作可以在本地完成，由浏览器提供。
只需使用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相关的答案来处理动态路由。
我创建了一个名为redirect的通用组件:
export default function Redirect(params) {
window.location.replace('<Destination URL>' + "/." params.destination);
return (
<div />
)
}
然后我在路由器文件中调用它:
<Route path='/wheretogo' element={<Redirect destination="wheretogo"/>}/>
使用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-router的Link组件就可以做到。在“to”道具中，您可以指定3种类型的数据:
a string: A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties. an object: An object that can have any of the following properties: pathname: A string representing the path to link to. search: A string representation of query parameters. hash: A hash to put in the URL, e.g. #a-hash. state: State to persist to the location. a function: A function to which current location is passed as an argument and which should return location representation as a string or as an object
对于你的例子(外部链接):
https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
您可以执行以下操作:
<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />
您还可以传递您想要的道具，如标题，id, className等。
你现在可以使用React link通过提供一个对象的路径名键链接到外部站点:
<链接到={{pathname: '//example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}} > . <链接到={{pathname: '//example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
如果您发现需要使用JavaScript在回调中生成链接，则可以使用window.location.replace()或window.location.assign()。
过度使用window.location.replace()，就像其他好的答案建议的那样，尝试使用window.location.assign()。
Window.location.replace()将替换位置历史而不保留当前页面。
window.location.assign()将转换到指定的URL，但将保存浏览器历史记录中的前一页，允许适当的后退按钮功能。
location.replace ()
location.assign ()
此外，如果您使用窗口。location = url方法，如在其他答案中提到的，我强烈建议切换到window.location.href = url。
关于它有一个很大的争论，许多用户似乎坚定地希望恢复较新的对象类型窗口。将其原始实现定位为字符串仅仅是因为它们可以(并且它们会攻击任何不这样说的人)，但是理论上您可以中断访问该窗口的其他库功能。位置的对象。
看看这段对话。这是可怕的。 设置位置。Href与位置
