Changing page address while closing dialog (material ui, react-router)

Question

I am using the Material UI Dialog and react-router to create a sign-in option. Inside the sign-in dialog there is a sign-up link that is supposed to redirect the user to the sign-up page and close the dialog at the same time.

The code for the sign up link looks like this:

render() {
        return (
            <Link
                class="underline text-green-600 mx-1 cursor-pointer"
                to="/signup"
                onClick={this.props.handleClose}
            >
                Sign Up
            </Link>
        );
    }

Right now, when the Signup link is clicked the dialog closes without changing the page address. If the onClick command is removed the page address changes but the dialog is not closed. Is there a way to both close the dialog and redirect the page at the same time? Thank you

what library is the <Link /> component from?

Ido
– Ido

2020-06-23 14:10:07 +00:00
Commented Jun 23, 2020 at 14:10 — Ido
– Ido, Commented Jun 23, 2020 at 14:10
@Ido it is from the react-router library

Cococrunch
– Cococrunch

2020-06-24 04:02:12 +00:00
Commented Jun 24, 2020 at 4:02 — Cococrunch
– Cococrunch, Commented Jun 24, 2020 at 4:02

Ido · Accepted Answer · 2020-06-24 08:57:30Z

1

You can provide a function to react-router Link to prop:

to: function
A function to which current location is passed as an argument and which should return location representation as a string or as an object

So one possible solution is:

  <Link
        class="underline text-green-600 mx-1 cursor-pointer"
        to={() => {
           const href = '/signup';

           this.props.handleClose();

           return href;
        }}
    >

answered Jun 24, 2020 at 8:57

Ido

5,8002 gold badges27 silver badges33 bronze badges

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

1 Comment

coredumped0x Over a year ago

won't this call the handleClose function the moment Link is rendered?

Collectives™ on Stack Overflow

Changing page address while closing dialog (material ui, react-router)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related