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 `` component from? – Ido Jun 23 '20 at 14:10 — Ido, Jun 23 '20 at 14:10
@Ido it is from the react-router library – Cococrunch Jun 24 '20 at 04:02 — Cococrunch, Jun 24 '20 at 04:02

score 1 · Accepted Answer · answered Jun 24 '20 at 08:57

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 '20 at 08:57

Ido

5,363
2
21
30

1

won't this call the handleClose function the moment Link is rendered? – coredumped0x Aug 04 '21 at 16:20

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

1 Answers1