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

Question

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

注册代码 link 如下所示：

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

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

Answer 1

您可以为 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

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

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

           this.props.handleClose();

           return href;
        }}
    >

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

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

dialog

reactjs

react-router

material-ui

react-link