Check the render method of `component`

Question

im trying to set up a react-router-dom higher order components following a guide. I have an issue saying..

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of component .

Here is my code.

App.js

 import React from 'react'; import { BrowserRouter as Router, Route, } from 'react-router-dom'; import Navigation from './Navigation'; import LandingPage from './Landing'; import SignUpPage from './SignUp'; import SignInPage from './SignIn'; import PasswordForgetPage from './PasswordForget'; import HomePage from './Home'; import AccountPage from './Account'; import * as routes from '../constants/routes'; const App = () => <Router> <div> <Navigation /> <hr/> <Route exact path={routes.LANDING} component={() => <LandingPage />} /> <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} /> <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} /> <Route exact path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} /> <Route exact path={routes.HOME} component={() => <HomePage />} /> <Route exact path={routes.ACCOUNT} component={() => <AccountPage />} /> </div> </Router> export default App; 

and my index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import { unregister } from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); unregister(); 

Thanks.

Answer 1

I believe you're mixing up your react router Route prop values. To assign a component to a Route there's a few different ways. One is with component , another is with render .

<Route ... component={LandingPage} />

<Route ... render={() => <LandingPage />} />

You're using the render syntax but the component prop. Either change component to render , or change () => <LandingPage /> to LandingPage (and the same for the other routes ofc).