React-router: warning.js:36 Warning: Failed prop type: Invalid prop `component` supplied to `Route`. in Route

[jadekler]

The following code gives me an error:

warning.js:36 Warning: Failed prop type: Invalid prop `component` supplied to `Route`.
    in Route

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, browserHistory} from 'react-router'

ReactDOM.render(<Router history={browserHistory}>
  <Route path="/" component={<div>hi</div>}/>
</Router>, document.getElementById('root'))

[jadekler]

It appears you need to use const whatever = React.createClass or class whatever extends React.Component. A normal jsx component e.g. const whatever = <div>hi</div> will not work.

It is probably a solid idea to make the error message about this more explicit.

[pshrmn]

<div>hi</div> is an element, not a component. () => <div>hi</div> would work.

[flekschas]

@pshrmn I am running into the same issue when wrapping a component. In my case I am defining HOC like so:

import React from "react";

const { Provider, Consumer } = React.createContext();

const withValue = Component =>
  React.forwardRef((props, ref) => (
    <Consumer>
      {value => <Component ref={ref} {...props} value={value} />}
    </Consumer>
  ));

export default withValue;

export { Provider, withValue };

And then later I am wrapping a class component using withValue as follows:

class Comp extends React.Component { ... }
export default withValue(Comp);

This worked so far in every scenario except for the Router, which throws:

Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

I am wondering if this is related to React.forwardRef?

The weird thing is that the component just renders fine.

[flekschas]

Okay apparently its an issue with React.forwardRef() and Route. I assume react-router doesn't know of React.forwardRef and throws a warning. I found out one can avoid this warning by passing the renderer directly to Route like so:

// The following will throw a warning mentioned in my previous post
// <Route exact path="/an-outrageously-awesome-endpoint" render={Comp} />

// Passing the renderer directly to `Route` avoids this warning
<Route exact path="/an-outrageously-awesome-endpoint" render={Comp.render} />

[timdorr]

You need to use the 4.4 betas or wait for release.

[amcdnl]

@timdorr - Hate to ask but - any hints to when 4.4+ will be out?

[thierry-prost]

Same issue. Beta 4.4 fixed it. Thank you @timdorr . Hoping the release will come soon 👍

[luismartinezs]

@flekschas

Try also this:

} />

[amcdnl]

Hate to bug but any updates here?

[jtreminio]

@flekschas solution of

<Route exact path="/an-outrageously-awesome-endpoint" render={Comp.render} />

works but Typescript errors.

---

The suggestion of using 4.4 beta works, but 4.4 beta still logs warnings to console.

---

Wrapping the components in withRouter also works:

<Route component={withRouter(Home)} exact path="/" />

but Typescript errors unless your component's props expect route properties.

---

I went back to 4.3 and did the following:

import hoistStatics from "hoist-non-react-statics";

const wrapped = (Component: any) => {
    const C = (props: any | {}) => {
        const {wrappedComponentRef, ...remainingProps} = props;

        return (
            <Route
                children={routeComponentProps => (
                    <Component
                        {...remainingProps}
                        ref={wrappedComponentRef}
                    />
                )}
            />
        );
    };

    C.displayName = `withRouter(${Component.displayName || Component.name})`;
    C.WrappedComponent = Component;

    return hoistStatics(C, Component);
};

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

All react-router wants is a Component, which I guess mobx's observer and redux's equivalent don't provide, thus the issue.

Using the wrapper function here makes react-router happy. It does what withRouter does but does not inject rout props: https://github.com/ReactTraining/react-router/blob/e0b48f01cf99ee6c06e93df13a6517541cf6391e/packages/react-router/modules/withRouter.js

[Hano1388]

I had the same issue, I updated react-router-dom and it fixed the issue...
npm install [email protected] --save

[alan345]

or npm install --save react-router-dom or yarn add react-router-dom
==> v 5.0.0
https://yarnpkg.com/en/package/react-router-dom

It solves the issue!