Webpack HotModule reloading with React Router render vs component

Question

I ran into an issue with HotModuleReloading, using ReactRouter for the first time. The browser console would display the correct change updates, but the window itself would not update.

From the official docs:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

I read that as render reduces the amount of unnecessary re-renders, here are their docs:

This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render prop.

I had been using the render method like so:

const App = () => {
  return (
    <Switch>
      <Route exact path="/" render={() => <Home />} />
    </Switch>
  );
};

I tried removing my Redux <Provider> content, but no changes. So I swapped out render for component like so and it works fine:

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
    </Switch>
  );
};

So, why is this?? What am I missing?

Jamie - Fenrir Digital Ltd Jamie - Fenrir Digital Ltd · Accepted Answer · 2019-03-25T01:04:31

When you use component the Route component passes certain props to the rendered component - such as location, history, match etc.

When you use render you're rendering the component in JSX like <Home />. This doesn't have any props passed to it.

If for whatever reason, you'd need to use render over component, you should pass the same props as component does:

const App = () => {
  return (
    <Switch>
      <Route exact path="/" render={(props) => <Home ...props />} />
    </Switch>
  );
};

This will make sure Home gets the props it needs to deal with Router stuff.

Hope this helps you get to the bottom of it!

Webpack HotModule reloading with React Router render vs component

1 Answers