单击按钮以重定向到父 URL

Question

The application is running on page: http://localhost:3000/login and when a button is clicked it should redirect to http://localhost:3000/ .

So this is how I've tried:

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

...


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

it doesn't work. What is missing?

Answer 1

Since you intend to move out of the app. Why not try

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

Answer 2

Solution 1: Handling onClick

import { useHistory } from "react-router-dom";

....

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

Solution 2:

Using button as Link

import { Link } from "react-router-dom";

...

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

Both of the solution works, however in second case, you might need to handle the styling of the text of Button