reactjs - 找到路由器（用于 Relay Modern）受保护的身份验证路由

Question

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

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，但其余的都是一样的。路线只是不渲染。

Found Router 似乎对围绕这个特定问题的示例很了解。有任何想法吗？

Answer 1

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

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

并像这样扩展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 提出了一些我最终没有使用但可能对任何未来读者有用的建议。在这里查看我的已关闭问题。