单击按钮以重定向到父 URL

Question

该应用程序在页面上运行： 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>

它不起作用。 有什么不见了？

Answer 1

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

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

Answer 2

解决方案 1：处理 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 文本的样式