发现路由器（用于中继现代）受保护的身份验证路由

Question

根据React Router给出的示例，我正在尝试创建一个受保护的路由，当用户未被授权使用Find Router for Relay Modern时，该路由将重定向到/login：

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (<Route {...rest} render={props => {
    if (!props) return
    if (Component && props && props.viewer) {
      return (<Component {...props} />)
    } else {
      throw new RedirectException('/login')
    }
  }}
  />)
}

我用真实的登录逻辑替换了fakeAuth，但其余的都是一样的。这条路线就是不渲染。

发现路由器似乎是轻的例子围绕这个特定的问题。有什么想法吗？

Answer 1

我最终分割了我的登录和身份验证路由：

export default makeRouteConfig(
  <Route>
    <LoginRoute exact path='/login' Component={Login} query={LoginQuery} />
    <PrivateRoute path='/' Component={App} query={AppQuery}>
  </Route>
)

并扩展LoginRoute的路由，如下所示：

export class LoginRoute extends Route {
  render({ Component, props }) {
    if (!props) return undefined
    if (Component && props && props.viewer) {
      throw new RedirectException('/')
    }
    return (<Component {...props} />)
  }
}

而PrivateRoute看起来基本相同，但在没有查看器的情况下，重定向不同。

它工作得很好。

Jimmy Jia，这个项目的创建者，还有一些其他的建议，我最终没有用到，但对未来的读者可能有用。请看我的闭刊。