Not working with React Router

[toddw]

Changes to routes in React Router are not updated. If you add a route, it is not available when you navigate to it until you refresh. If you remove a route, it is still available until you refresh.

However, if you change the number of children in the parent containing the router, then it will update.

I cloned the boilerplate repo and made some changes to demonstrate: https://github.com/toddw/react-transform-boilerplate/blob/master/src/App.js

Demonstration:

[gaearon]

Thanks for reporting. Any idea why this happens?

[toddw]

I'm not entirely sure. I noticed you talking about 'router.replaceRoutes' in the past. That has been removed and I'm not sure how the router handles new props. I started to think that the router was setting routes in state and not updating when it received new props. I'm still suspicious to this but then why does adding or removing a sibling make it suddenly work?

[kgdev]

Not working with Redux-Form too actually,

As long as there are high-order component decorators, react-proxy could not catch them and therefore the hot reload would fail.

e.g.
The code
@reduxForm() class MyComponent {...}
The tree is rendered as:
ReduxFormConnector --> ReduxForm --> MyComponent.

ReduxFormConnector and MyComponent are recognized and proxied by react-proxy. So far so good. However ReduxForm will not. So when there is a new module, a new ReduxForm is rendered. Because the type is different from the old one, the old ReduxForm instance is unmounted (so is MyComponent) and then the new ReduxForm instance is mounted. Therefore the state in MyComponent lost.

Any idea how to solve this problem? My current work around is to make sure ReduxFormConnector is not proxied. So I ignore any changes in ReduxFormConnector, but any changes in MyComponent will still be hot reloaded.

[gaearon]

Just executing the module again should not affect the parent component anyway. Yes, it's not recognised, but for this reason it is just ignored, and only child component (your class) is actually updated. Is this not what happens?

[kgdev]

For babel@5, only child component is proxied (which should be good). However for babel@6 with transform-decorators-legacy, the root component is proxied (and in this case it doesn't work)

[kgdev]

The work around is instead of writing:

   @reduxForm()
   export default class MyComponent {...}

I need to write:

    class MyComponent {...}

    @reduxForm()
    export default class extends MyComponent

[gaearon]

Oh okay. That's a Babel 6 plugin order issue I guess. The transform runs before the decorator transform. I think it will be fixed in Babel 7 by grouping plugin passes by preset. Don't rely on experimental language features :-)

[gaearon]

The new Babel 6.5.0 passPerPreset option might help here.

[gaearon]

I don’t see anything actionable for us here so closing. When <Router> learns to reload its routes in componentWillReceiveProps it will probably work again.

The Redux Form issue later in comments is completely unrelated to this issue and has to do with decorator usage. Don’t use decorators, they are far from being stable, and are too easy to break in Babel 6 because of plugin ordering issues.