反应路由-如何使用路由加载弹出窗口

Question

我所拥有的： 1.登录组件 2.注册组件

在“登录组件”中，有一个称为寄存器的链接。它将其路由到“注册”页面。代码很简单：

<Link to='/register' className='links align-left'>Register</Link>

我想改为在弹出窗口中显示寄存器组件。我知道，我可以使用对话框组件并在该对话框中显示注册组件。容易，但是我不了解如何设置路由，以便它在后面显示登录窗口，并在弹出窗口中加载注册组件。莱姆举例说明。在以下屏幕截图中查看trello板的工作方式。网址为 https://trello.com/b/i1QoQatf/

现在，当我单击一个项目时，它会显示一个弹出窗口，如以下屏幕截图所示。请注意，URL现在为 https://trello.com/c/QisVDEgX/639-sort-all-dropdowns-alphaetically

现在，我的困惑是，如何为我的“登录和注册”组件实现相同的功能。如果我这样加载路由：

<Route path='/register' component={RegisterComponent} />

它将调用Register Component的render方法，然后仅加载Register Component。我如何将其路由到注册组件，并且仍在后台使用“登录”。有什么帮助吗？

Answer 1

我认为要实现此目的，您的RegisterComponent将必须呈现登录组件和注册弹出窗口。

在您的渲染函数中，您将返回RegisterPopup是您在弹出窗口中渲染的注册表单的地方（让我们假设为react modal）

<React.Fragment>
    <LoginComponent/>
    <RegisterPopup/>
</React.Fragment>

Answer 2

在此处添加我的解决方案，以便人们理解路由的概念。

如果您使用的是NextJS，这实际上很容易。在NextJS中，我们需要使用服务器（如express）进行路由。 NextJS路由器非常强大，并提供了很大的灵活性。而且，NextJS Link标记功能强大。以下是有关如何在不加载页面的情况下实现url路由的说明。

通常，您可以通过两种方式访问​​页面。 1.单击链接/按钮（例如，立即注册）2.通过直接将URL粘贴在浏览器中。假设我有两个网址：

1. https://example.com/login
2. https://example.com/register

现在，我要实现的是，当我单击“登录”页面中的“立即注册”链接时，它应将我的页面路由到/ register，但仍在后台显示“登录”页面，并在弹出窗口中显示“注册”表单。但是请记住，我想通过确保Login组件不会加载两次来实现此目的。

使用NextJS，将是以下方法：

1. 我们将在下一个js页面创建一个名为account.js的页面
2. 要转到我们的登录页面，登录屏幕的链接将如下所示：

    <Link href={{pathname: '/account', query: { mode: 'login' }}} as {'/login}>
    <a>Login</a>
    </Link> 

链接页面会将我们转到帐户页面。

1. 如果您注意到，链接标记不是正常的href。上面的链接标记表示“我们要转到帐户页面，但将网址显示为” / login”，并且在渲染帐户页面时，将查询{mode：'login'}发送到帐户页面的路由器对象。

2. 在帐户页面的呈现功能中，我们可以基于路由器的查询对象轻松地在运行时做出决定。

      render() {
        const mode = this.props.router.query.mode;


        return (
          <div>
            <LoginComponent></LoginComponent>
            {/* the following line will open the register component in a popup */}
            {mode === 'registration' && <PopUp><RegisterComponent></RegisterComponent></PopUp>}
          </div>
        )

      }

1. 在登录组件中，我们将添加注册链接，如下所示：

        <Link href={{pathname: '/account', query: { mode: 'registration' }}} as={`/`}>
          <a>Register Now</a>
        </Link>

在上面的示例中，我们所做的只是创建了一个名为accounts.js的页面。我们确保当路由到“登录”窗口时，将其路由到“帐户”页面，但是我们发送模式：“登录”。当我们单击注册链接时，我们正在加载同一页面-account.js，但具有不同的模式：“注册”。渲染功能将在弹出窗口中打开寄存器组件，因为模式为==='registration'。在网址中，该地址将显示为“ / register”

请注意：那只是示例代码，绝不是经过测试的代码，因此请记住这一点。