使用 react + react-router 处理来自 firebase URL 的传入查询参数答案

【问题标题】：Handle incoming query params from firebase URL using react + react-router使用 react + react-router 处理来自 firebase URL 的传入查询参数
【发布时间】：2016-09-23 09:39:55
【问题描述】：

我正在尝试使用 Firebase 将电子邮件/密码验证与电子邮件验证联系起来。我正在使用 React + Redux + React-Router。帐户创建进展顺利 - 用户帐户是在 Firebase 用户数据库中创建的，但我遇到的问题是试图从 Firebase 在其电子邮件验证中提供的链接中捕获“模式”和“oobCode”（ URL 格式为 .../verify?mode=foo&oobCode=bar)。我有 Firebase 链接（目前）到 localhost:3000/verify，所以在我的路由中，我尝试添加这样的路由路径：

<Router history={ browserHistory }>
        <Route path="/" component={ MainApp }>
            <IndexRoute component={ LandingPage } onEnter={ redirectIfLoggedIn } />
            <Route path="verify/:mode/:oobCode" component={ LandingPage } onEnter={ redirectIfVerified } />
            // other routes
        </Route>
</Router>

但是，当我单击电子邮件中的 URL 时，我得到一个错误页面。本质上，我要做的就是拦截传入的电子邮件链接，使用 Firebase 的 applyActionCode 检查模式和 oobCode 是否正确，然后将用户发送到主登录页面或错误页面。知道我在这里缺少什么吗？

【问题讨论】：

标签： reactjs firebase react-router firebase-authentication react-redux

【解决方案1】：

您收到的网址格式为.../verify?mode=foo&oobCode=bar。

路线应该是这样的 -

...
  <Route path="verify" component={ LandingPage } onEnter={redirectIfVerified } />
...

mode 和 oobCode 是查询参数。您可以从注入到 props 中的位置对象获取组件中的这些值。

this.props.location.query = {mode: "foo", oobCode: "bar"}

【讨论】：