Router: onEnter Hooks, on the roadmap ?

Created on 1 Jun 2018 · 6Comments · Source: reach/router

Is something plan for it ?

Source

micabe

Most helpful comment

const withAuth = WrappedComponent => (
  class WithAuto extends React.Component {  
     state = {isAuth: false}

     componentDidMount() { 
        //auth users and call setState({isAuth: true})
        //if fails, redirect
     }

    render() {
       return this.state.isAuth ? <WrappedComponent {...this.props} /> : <Loading />
    }
  }
)

const DashWithAuth = withAuth(props => <div>screen</div>)

<DashWithAuth path='/dashboard' />

maxguzenski on 7 Jun 2018

👍4

All 6 comments

Hi, I am not a reach-router developer... but, I believe that this kind of hooks aren't needed, we can use componentDidMount/componentWillUnmount for that.

maxguzenski on 1 Jun 2018

👆

The primary reason for the onEnter hooks was to suspend rendering until async data loaded. That's exactly what React Suspense is all about! So no, no plans, because React is solving this as a first-class problem for React.

I did have some really solid cross-compatibility with react router v3, but decided to ditch it, you can see it in this commit:

https://github.com/reach/router/commit/253ef81bd479f465676dcaf0fd80b10dc2306db4

Here's some code that might provide some inspiration on how to do a similar thing:

https://github.com/reach/router/blob/253ef81bd479f465676dcaf0fd80b10dc2306db4/src/index.js#L463-L593

ryanflorence on 1 Jun 2018

How to do router auth check without hooks like onEnter?

hardfist on 7 Jun 2018

const withAuth = WrappedComponent => (
  class WithAuto extends React.Component {  
     state = {isAuth: false}

     componentDidMount() { 
        //auth users and call setState({isAuth: true})
        //if fails, redirect
     }

    render() {
       return this.state.isAuth ? <WrappedComponent {...this.props} /> : <Loading />
    }
  }
)

const DashWithAuth = withAuth(props => <div>screen</div>)

<DashWithAuth path='/dashboard' />

maxguzenski on 7 Jun 2018

👍4

Is there any known time frame for React Suspense API to arrive?

We're currently looking for a router that can load data (mainly for authentication and authorization purposes) before the component of a new route is rendered.

Angular 1.x router has resolve function, Ember router has model function, Vue router has beforeRouteEnter function, but for some reason the most popular React router (React Router 4) and (hopefully to be the most popular soon ;)) this router don't handle such scenario...

Is the new Suspense API supposed to handle it? Will it be able to handle errors, e.g. stop transition to the new route when authorization fails?