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?

@kasho That completely breaks my app. Found this issue, seems to be a solution: https://github.com/ReactTraining/react-router/issues/6420 — ronnyrr, Oct 26 '18 at 11:47

score 26 · Accepted Answer · edited Nov 28 '19 at 10:42

26

Try using render prop instead of component

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

edited Nov 28 '19 at 10:42

Mo.

26,306
36
159
225

answered Oct 27 '18 at 07:57

Byrd

402
4
5

6

Thanks! Solution: ` } />` – ronnyrr Oct 28 '18 at 09:16
1

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) – Jason Allshorn Nov 13 '18 at 19:30
1

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. – whitehawk Jan 02 '19 at 16:28
So the best way is: ```javascript } /> ``` In this case, you also received `props` inside the component. – Jimmy Chu Feb 21 '19 at 07:25
2

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. – jmarceli Feb 24 '19 at 11:55

score 11 · Answer 2 · answered Nov 28 '18 at 10:48

11

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

answered Nov 28 '18 at 10:48

zenoh

2,071
1
22
38

1

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. – Erik Töyrä Silfverswärd Apr 17 '19 at 21:39

score 0 · Answer 3 · answered Sep 19 '19 at 03:36

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} />} />

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

3 Answers3

Linked