React router redirect not working when in function

Question

I am attempting to redirect on clicking an item, however the redirect doesn't seem to render...

const doRedirect = () => {
    console.log('redirecting');
    return <Redirect to='/my-path' />;
}

return <div onClick={() => doRedirect()}>Click me</div>;

When I click the div, it is hittin the console log just fine, however I can't seem to get it to return the redirect...

Is there any reason why you're trying to use react router that way? I strongly suggest you take a look at useHistory hook and how you can use it to navigate between pages — Luka
– Luka, Commented Jul 8, 2021 at 20:21
<Redirect to='/my-path' /> will only work if it actually gets rendered. — jonrsharpe
– jonrsharpe, Commented Jul 8, 2021 at 20:21
You can check here on how to redirect programmatically stackoverflow.com/questions/31079081/… — Anish Antony
– Anish Antony, Commented Jul 8, 2021 at 20:23

Kevin.a · Accepted Answer · 2021-07-08 20:23:32Z

2

import {useHistory} from 'react-router-dom'

const history = useHistory(); 
const doRedirect = () => {
    console.log('redirecting');
   history.push('/your-path')
}


return <div onClick={() => doRedirect()}>Click me</div>;

The way to do this is with the useHistory hook.

answered Jul 8, 2021 at 20:23

Kevin.a

4,34615 gold badges52 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

physicsboy Over a year ago

Ah! You are correct! I had seen things mentioned around the history and useHistory in my search, however I mistakenly thought this was a React hook like useEffect, not something witih the react-router-dom library!

Collectives™ on Stack Overflow

React router redirect not working when in function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related