Warning: Failed Proptype: Invalid Prop 'Component' Supplied to 'Route'

Warning: Failed prop type: Invalid prop 'component' supplied to 'Route' - react-router-dom

Change this <Route component={<NotFound />} /> to this: <Route component={NotFound} />

This is pretty standard behavior for libraries like this. They want to render the component like this: <component /> rather than like this: {component}.

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

When using a lazy loaded component, you would need to supply it to the Route component like

// imports here
... 
const Decks = React.lazy(() => import('./pages/Decks'));
...
class App extends Component {
      ...

    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <MenuAppBar />

                    <div style={{paddingTop: '4rem'}}>
                        <Suspense fallback={<LazyLoading />}>
                            <Switch>
                                <Route exact path="/" component={Home} />
                                <Route path="/decks" render={(props) => <Decks {...props} />} />
                                ...
                            </Switch>
                        </Suspense>
                    </div>

                    <Footer />
                </div>
            </ConnectedRouter>
        );
    }
... 
}

Probably its an incorrect PropType check in react-router and may have been fixed in the latest versions to make it compatible with react v16.6

Warning: Failed prop type: Invalid prop `component` supplied to `Route`. & Warning: [react-router] Location "/" did not match any routes

Checkout if the filenames and import statements have the correct spelling.

pages.js should be Pages.js

Indexpage.js should be IndexPage.js

Or change it in the import statements.. its case-sensitive.

The docs says you have to wrap your Routes with a main Router /

  <Router history={browserHistory}>
    <Route path="/" component={App}>

      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>

    </Route>
  </Router>

  // this is the main App component
  const App = ({children}) => (
     <div id="main-layout">{children}</div>
  )

Failed prop type while doing prop validation in React.js

React.ReactNode is undefined in javascript. If you're using typescript it would be a type, but even that only exists at compile time and cannot be used for propTypes.

Instead, the way to do the children prop type is:

import PropTypes from 'prop-types';
// ...
CurrencyContextProvider.propTypes = {
    children: PropTypes.node
}

---

Related Topics