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

Question

我正在尝试使用Firebase将电子邮件/pw认证与电子邮件验证连接起来。我正在使用React + Redux + React- router。帐户创建很好-用户帐户是在Firebase用户数据库中创建的，但我遇到的问题是试图从Firebase在其电子邮件验证中提供的链接中捕获"mode"one_answers"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时，我得到一个错误页面。基本上，我所要做的就是拦截传入的电子邮件链接，检查模式&oobCode使用Firebase的applyActionCode是正确的，然后将用户发送到主登录页面或错误页面。你知道我错过了什么吗?

Answer 1

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

路由应该是这样的-

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

mode和oobCode为查询参数。你可以从注入到props中的location对象中获得组件中的这些值。

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