Button clicked to redirect to parent 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?

https://stackoverflow.com/questions/1655065/redirecting-to-a-relative-url-in-javascript — Weilory, Sep 03 '20 at 14:33
Does this answer your question? [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — 0stone0, Sep 03 '20 at 14:34

score 0 · Answer 1 · answered Sep 03 '20 at 14:38

0

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

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

answered Sep 03 '20 at 14:38

Wakeel

4,272
2
13
14

that's what I was looking for! something quick that fixes the problem without importing other stuff – Leo Messi Sep 03 '20 at 14:39
Happy coding ;) – Wakeel Sep 03 '20 at 14:41
Causes a page refresh and also overwrites browser history. Probably not what you want. @0stone0's comment is what you need. – Lionel Rowe Sep 03 '20 at 14:43
1

Since the OP tagged `reactjs` and `react-router`, is this the preferred way to redirect a user? – 0stone0 Sep 03 '20 at 14:45
To my understanding, the react app isn't running under localhost:3000/ but http://localhost:3000/login – Wakeel Sep 03 '20 at 14:47

score 0 · Answer 2 · answered Aug 19 '21 at 21:26

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

Button clicked to redirect to parent URL

2 Answers2