React Routing - 如何使用路由加载弹出窗口

Question

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

在登录组件中，有一个link叫注册器。它将它路由到注册页面。代码很简单：

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

我想改为在弹出窗口中显示注册组件。我知道，我可以使用对话框组件并在该对话框中显示注册组件。很简单，但我不明白的是如何设置我的路由，以便它在后面显示登录 window，并在弹出窗口中加载注册组件。让我用一个例子来解释。在以下屏幕截图中查看 trello board 的工作原理。 url 是 https://trello.com/b/i1QoQatf/

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

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

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

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

Answer 1

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

在您的呈现函数中，您将 return 其中 RegisterPopup 是您在弹出窗口中呈现的注册表单（假设反应模式）

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

Answer 2

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

如果您使用的是 NextJS，这实际上非常简单。在 NextJS 中，我们需要使用服务器（如 express）进行路由。 NextJS 路由器非常强大并提供了很大的灵活性。此外，NextJS Link 标签同样强大。以下是如何在不加载页面的情况下实现url路由的说明。

一般来说，您可以通过两种方式到达页面。 1. 单击 link/button（例如立即注册） 2. 直接在浏览器中粘贴 URL。比方说，我有两个 URLs:

现在，我想要实现的是，当我在我的登录页面中单击 "Register Now" link 时，它应该将我的页面路由到 /register 但仍然在后台显示登录页面，和弹出窗口中的注册表。但请记住，我想通过确保登录组件不会加载两次来实现此目的。

使用 NextJS，以下是实现它的方法：

我们将创建下一个名为 account.js
为了路由到我们的登录页面，登录屏幕的 link 将类似于以下内容：

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

link 页面会将我们引导至帐户页面。

如果您注意到，link 标签不是普通的 href。上面的 link 标签表示 "we want to go to account page, but show url as "/login"，当我们呈现帐户页面时，将查询 {mode: 'login'} 发送到帐户页面的路由器对象。
在account page的render函数中，我们可以根据router的query object轻松在运行时间内做出决定。

      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>
        )

      }

在登录组件中，我们将添加注册link，如下所示：

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

在上面的示例中，我们所做的只是创建了一个名为 accounts.js 的页面。我们确保当我们路由到登录 window 时，我们将它路由到帐户页面，但我们发送模式：'login'。当我们点击注册 link 时，我们正在加载相同的页面 - accounts.js 但使用不同的模式：'registration'。 render 函数会在 popup 中打开 register 组件，因为 mode 是 === 'registration'。在url中，它将显示地址为'/register'

请注意：该示例代码仅供参考，绝不是经过测试的代码，因此请牢记。

React Routing - 如何使用路由加载弹出窗口

React Routing - How to load pop up using Routes

javascript

popup

reactjs

react-router-v4