React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."

Question

I'm using the latest version (16.6) of React with react-router (4.3.1) and trying to use code splitting using React.Suspense.

Although my routing is working and the code did split into several bundles loaded dynamically, I'm getting a warning about not returning a function, but an object to Route. My code:

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';

import Loading from 'common/Loading';

const Prime = lazy(() => import('modules/Prime'));
const Demo = lazy(() => import('modules/Demo'));

const App = () => (
  <Suspense fallback={<Loading>Loading...</Loading>}>
    <Switch>
      <Route path="/" component={Prime} exact />
      <Route path="/demo" component={Demo} />
    </Switch>
  </Suspense>
);

export default withRouter(App);

The console warning is as follows: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

A normal import would return a function, but the dynamic import with lazy() is returning an object.

Any fixes for this?

Henka

That's odd you could try something like <Route path="/" component={() => <Prime/>} exact /> – Support

@Support That completely breaks my app. Found this issue, seems to be a solution: github.com/ReactTraining/react-router/issues/6420 – Henka

Answer 1

Try using render prop instead of component

<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />

Fare

Thanks! Solution: <Route exact path="/" component={props => <Prime {...props} />} /> – Henka

ronnyrr's solution worked for me. Also, I updated to the latest version of React, and React router (react-dom 16.6.3 - react-router-dom 4.3.1) – Forehand

This is not a good solution because it will cause constant unmounting and remounting of these components if your redux connection is above this in the hierarchy. – Geniality

So the best way is: javascript <Route exact path="/" render={props => <Prime {...props} />} /> In this case, you also received props inside the component. – Agronomy

Using inline arrow function as an argument for component prop will cause a re-render on each route change, which may be problematic if you are nesting routes and relay on lifecycle methods in rendered subcomponents. I would go with the @tmvnty solution instead. – Mapp

Answer 2

This will be fixed in react-router-dom version 4.4+ as this issue suggests

You can wait for the final release or if you don't want to change your code today, you can install the beta version now by yarn add react-router-dom@next

Belshin

I can confirm that react-router-dom v5.0.0 solves this problem. v4.4.x seems to have been beta releses only before the major v5.0.0 release. – Grille

Answer 3

I know this answer do not respond the original question, but as I have experienced a similar issue, maybe my solution will help another people.

My Error:

Failed prop type: Invalid prop `component` of type `object` supplied to "link", expected function.

Alike the accepted answer, this could be fixed with:

<Link to={'/admin'} title={'Log In'} component={props => <Button {...props} />} />

Oxycephaly