CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Matías Magni
Matías Magni

Reputation: 323

SO Issue with react-router-dom: "Check the render method of `Header`"

I'm getting an error with react-router-dom "/home" route fails with the error below:

Route /home:

Route /home

Route "/about" works fine:

Route /about

Does anyone knows how to solve this problem? This is how my "index.js" file looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import registerServiceWorker from './registerServiceWorker';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/font-awesome/css/font-awesome.min.css';

import App from './components/App';

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={ history }>
    <App />
  </Router>
, document.getElementById('root'));

registerServiceWorker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

And this is how my "App.jsx" component's file looks like:

import React, { Component } from "react";
import { Switch, Route, Redirect } from 'react-router-dom';

import MainNav from './MainNav/MainNav';
import Logo from './Logo/Logo';
import Footer from './Footer/Footer';
import Copyright from './Copyright/Copyright';
import HomePage from './HomePage/HomePage';
import AboutPage from './AboutPage/AboutPage';
import Error404 from './Error404/Error404';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="app">
        <MainNav />
        <Logo />
        <Switch>
        <Route path="/home" component={ HomePage } />
          <Route exact path="/about" component={ AboutPage } />
          <Route exact path="/404" component={ Error404 } />
          <Redirect from="/" to="/home" />
        </Switch>
        <Footer />
        <Copyright />
      </div>
    );
  }
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

This is my "HomePage.jsx":

import React, { Component } from 'react';

import Header from './Header/Header';
import Stores from './Stores/Stores';
import Services from './Services/Services';
import Reviews from './Reviews/Reviews';
import Contact from './Contact/Contact';

import './HomePage.css';

export default class HomePage extends Component {
  render() {
    return (
      <div className="homepage">
        <Header />
        <Stores />
        <Services />
        <Reviews />
        <Contact />
      </div>
    )
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Already solved. Thanks!

Upvotes: 1

Views: 2120

Answers (1)

Ante Gulin
Ante Gulin

Reputation: 2020

As the error say - You've probably forgot to export the Header component, or mixed default export with named export and vice-versa - or the render method returns undefined.

Upvotes: 1

Related Questions