[v4] onEnter and onChange hooks

[olegafx]

How could we replace onEnter and onChange route hooks?

I found only 1 solution: additional <Match/> with a custom component.
This component could use something like componentWillReceiveProps to emulate onChange.
But what about onEnter? We have no lifecycle hooks that receive props on initial render.

Nice work, btw.

[mjackson]

Thanks :)

We have no lifecycle hooks that receive props on initial render.

We no longer have a "route lifecycle". Instead, since <Match> components are real components (not pseudo-components like <Route>s were) they get to participate in React's lifecycle, which means they can just use componentWillMount.

[corydeppen]

As someone who is very new to React, I'm trying to understand if the recommended approach is to have the component being rendered with Match (e.g. /items) implement componentWillMount and possibly set data on state instead of getting data passed via props. Or how might a table row containing a link to the item details be rendered with Match (e.g. /items/:id) - seems that wouldn't be able to have the item passed to it via props if I understand how the router works.

I appreciate any guidance.

[mbrevda]

Here is an example: https://reacttraining.com/react-router/web/example/auth-workflow

[dtipson]

Been looking over that example, but I think I'm not understanding how that works when it's asynchronous. If, say, /items/:id requires a network call to retrieve, how would the navigation transition get blocked until the response comes back and there's something new to display? I'd prefer not to have every page display have to have a componentWillMount empty state, if that makes sense.

It looks like there was an example that sort of went in documenting this kind of direction where the Router becomes slave to Redux, and navigations are all handled in there, but it's not part of the playground yet: https://github.com/ReactTraining/react-router/blob/7f6706dab4827afc1c26a58418f8ef8c8ab40125/website/examples/Redux.js

Is there a non-redux pattern?

[MathieuLorber]

Hello. I still don't understand how I'm supposed to replace onEnter with router v4. componentWill/DidMount seem "technical" hooks linked to dom lifecycle. With a route /view/:id, if I switch from /view/1 to /view/2, the same ViewComponent will be used, and componentDidMount() will not be called between the two different routes. If I'm fetching data using the :id, how I am suppose to do without an onEnter ?
(besides this problem, I'm very seduced by the rest of the API ftm =). I particularly appreciate the login redirect solution, often wanted smthg like this with old single page apps)

[MathieuLorber]

I was thinking of using Route.render(), but I'm not sure to really understand when it can be called. It could result in useless fetching calls =/

[pshrmn]

@MathieuLorber componentWillReceiveProps

[MathieuLorber]

Sure, but the whole lifecycle of the component can be called for several reasons (any change in the app state). With componentWillReceiveProps, I have to check that the changed prop is the one which interests me for fetching. Or maybe by creating a dedicated wrapper component with no other props. Still, doesn't it sound a bit verbose ?

[pshrmn]

v4 is all about routes just being components. That means taking advantage of lifecycle methods.

componentWillMount() { // or componentDidMount
  fetch(this.props.match.params.id)
}

componentWillReceiveProps(nextProps) { // or componentDidUpdate
  if (nextProps.match.params.id !== this.props.match.params.id) {
    fetch(nextProps.match.params.id)
  }
}

[MathieuLorber]

Hmm I still must be missing something. Your proposition works in a component inside the Route, not in a component extending Route (componentWillReceiveProps is never called).

So I still need a dedicated wrapper component. And this solution is a lot more verbose + a lot more bug prone.

For the moment, using Route.render() is my best candidate. Code is there : https://gist.github.com/MathieuLorber/61ee584e375c41cd60038a11a9bf437b

Thanks for your help =) !

[pshrmn]

What is the purpose of your <MyRoute> component?

[MathieuLorber]

Well, I wanted to take advantage of lifecycle methods =]

[pshrmn]

The lifecycle methods should be on the component that is rendered by the <Route>. A <Route> is just there to match its path against the current location.pathname.