单击按钮以重定向到父 URL

Posted 2023-02-22

【中文标题】单击按钮以重定向到父 URL

【英文标题】：Button clicked to redirect to parent URL

【发布时间】：2020-12-22 19:39:07

【问题描述】：

应用程序正在页面上运行：http://localhost:3000/login，当点击按钮时，它应该重定向到http://localhost:3000/。

这就是我尝试过的方式：

import React from 'react';
import  Redirect  from 'react-router-dom';
import  Button  from 'semantic-ui-react';

...


<Button onClick=() => <Redirect to="/" />>
     Go home
</Button>

它不起作用。缺少什么？

【问题讨论】：

***.com/questions/1655065/…

这能回答你的问题吗？ Programmatically navigate using react router

【参考方案1】：

因为您打算退出该应用程序。为什么不试试

onClick=()=> window.location.replace('/')

【讨论】：

这就是我想要的！无需导入其他内容即可快速解决问题的方法

快乐编码 ;)

导致页面刷新并覆盖浏览器历史记录。可能不是你想要的。 @0stone0 的评论正是您所需要的。

由于 OP 标记为 reactjs 和 react-router，这是重定向用户的首选方式吗？

据我了解，react 应用程序不在 localhost:3000/ 下运行，而是在localhost:3000/login

【参考方案2】：

方案一：处理onClick

import  useHistory  from "react-router-dom";

....

const history = useHistory();
<Button onClick=() => history.push("/");>
 Go home
</Button>

解决方案 2：

使用按钮作为链接

import  Link  from "react-router-dom";

...

<Button as=Link to="/">
 Go Home
<Button/>

这两种解决方案都有效，但在第二种情况下，您可能需要处理 Button 文本的样式