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.

Jayce444 Jayce444 · Accepted Answer · 2018-08-10T03:36:26

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).

Check the render method of `component`

1 Answers