Does react-router v4 support Hot Module Replacement

[helfi92]

Does react-router v4 support Hot Module Replacement with react-hot-loader v3? I can't seem to find any documentation on that. If someone can help, I'd be willing to update the docs.

[mjackson]

It should, yes. Though I don't know anyone actually doing it yet. You can be the pioneer :)

The blocker before was that all of our configuration was specified up front in one spot. But now that our API is Just Components™ anything that you can do with other components you should be able to do with React Router. Please give it a shot and let us know how it goes.

[hampusohlsson]

@helfi92 @mjackson can confirm it is working, I'm using react-router v4 webpack v2 and react-hot-loader v3beta-6 😄

edit: code sample https://gist.github.com/hampusohlsson/9b5ab224f2856b7446892cff0576e78d

[helfi92]

@hampusohlsson @mjackson That's right, it worked liked a charm :)

[rclai]

Does it work if you're using lazy loaded routes?

[helfi92]

@rclai It should work. The lazy loaded library seems to use System.import. You can do this:

// App.js
// ...

const Foo = asyncComponent(() => System.import('./components/Foo').then(module => module.default));
const Bar = asyncComponent(() => System.import('./components/Bar').then(module => module.default));
const Home = asyncComponent(() => System.import('./components/Home').then(module => module.default));

const App = () => (
  <Router>
    <div className="App">
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/foo">Foo</Link></li>
        <li><Link to="/bar">Bar</Link></li>
      </ul>

      <Route exact path="/" component={Home} />
      <Route path="/foo" component={Foo} />
      <Route path="/bar" component={Bar} />
    </div>
  </Router>
);

// ...

// asyncComponent.js
import React from 'react';

const asyncComponent = getComponent => class AsyncComponent extends React.Component {
  constructor(props) {
    super(props);

    this.Component = null;
    this.state = { Component: AsyncComponent.Component };
  }

  componentWillMount() {
    if (!this.state.Component) {
      getComponent().then(Component => {
        AsyncComponent.Component = Component;

        this.setState({ Component });
      });
    }
  }

  render() {
    const { Component } = this.state;

    if (Component) {
      return <Component {...this.props} />;
    }

    return null;
  }
};

export default asyncComponent;

[helfi92]

I created react-router-starter, a starter kit, that uses react-router v4 + router code splitting + hot module replacement. Feel free to use.