reactjs - 关闭对话框时更改页面地址（材质 ui，react-router）

Question

我正在使用 Material UI Dialog 和 react-router 创建登录选项。在登录对话框中有一个注册链接，应该将用户重定向到注册页面并同时关闭对话框。

注册链接的代码如下所示：

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

现在，当单击注册链接时，对话框会关闭而不更改页面地址。如果删除了 onClick 命令，页面地址会更改，但对话框不会关闭。有没有办法同时关闭对话框和重定向页面？谢谢

Answer 1

你可以为react-router Link to prop提供一个函数：

to : function
将当前位置作为参数传递给它的函数，它应该将位置表示形式作为字符串或作为对象返回

所以一种可能的解决方案是：

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

           this.props.handleClose();

           return href;
        }}
    >