Custom redirect using Found router w/ React

Question

I'm building a React app and using Found as the router.

The docs describe a technique for doing custom redirection.

Here is a code sample of what I'm attempting to accomplish:

class App extends React.Component {
  render() {
    const { viewer, children } = this.props;

    if (viewer === null && this.props.location.pathname != "/login") {
      throw new RedirectException({ action: "PUSH", pathname: "/login" });
    }

    return (
      <div>
        {children}
      </div>
    );
  }
}

Basically I just want to redirect to the login page if there is no user. When I do this, the address bar correctly updates to /login, but I see an error in the console -

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js?d2b3:744)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js?d2b3:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js?d2b3:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js?d2b3:546)
    at Object.receiveComponent (ReactReconciler.js?399b:124)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js?d2b3:753)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js?d2b3:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js?d2b3:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js?d2b3:546)
    at Object.receiveComponent (ReactReconciler.js?399b:124)

If I do a page refresh at this point, the login page works just fine.

What am I missing here?

If you want to redirect the user (and you don't care about the state of the application/components inside) you can just use window.location = '/login' — Dekel
– Dekel, Commented Aug 23, 2017 at 14:55
Cool, yea I'll consider that as a sort of fallback plan, but I'd also like to understand the more idiomatic approach to this — metahamza
– metahamza, Commented Aug 23, 2017 at 15:05
Do you know where exactly this exception was raised? Might be some external component that is not even relevant to your code... — Dekel
– Dekel, Commented Aug 23, 2017 at 15:20
That's another issue in and of itself. Updated the post to include the full stacktrace, which is decidedly unhelpful — metahamza
– metahamza, Commented Aug 23, 2017 at 15:30

taion · Accepted Answer · 2017-08-23 17:38:16Z

1

You need to throw the RedirectException in the render method on the route, not on the route component.

Though if you're using Found Relay, for the time being you'd need to use prerender instead – see the example in https://github.com/4Catalyzer/found-relay/blob/v0.3.0-alpha.6/test/modern/prerender.test.js.

answered Aug 23, 2017 at 17:38

taion

2,8371 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

metahamza Over a year ago

A follow-up - what technique would you recommend for redirection based on the results of a mutation, for example in the context of the onCompleted callback? It doesn't appear that prerender is being invoked in that case.

Collectives™ on Stack Overflow

Custom redirect using Found router w/ React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related