CODEWITHSUNDEEP
javascriptreactjsreact-router
Alex Marple
Alex Marple

Reputation: 3048

React Router 'Home is not defined'

EDIT: Thanks to all you shiny, happy people. The trick is to use import/export syntax to get everything up and running.

I keep getting Uncaught ReferenceError: Home is not defined when I am trying to implement React Router. I'm not sure what the deal is though as this should be working. Can someone spot my mistake or shed some light on how I'm doing this wrong?

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router-dom');
var BrowserRouter = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
// var Switch = ReactRouter.Switch;

import Home from './Home';
import Data from './Data';


class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path="/" component={Home} />
        </div>
      </BrowserRouter>
    )
  }
}


module.exports = App;

I also tried var Home = require('./Home'); but that didn't work either.

Below is how my Home component is set up.

var React = require('react');
var ReactDOM = require('react-dom');
var Nav = require('./Nav');
var Hero = require('./Hero');
var Block = require('./Block');
var Table = require('./Table');
var Footer = require('./Footer');
var Modal = require('./Modal');

class Home extends React.Component {
  render(){
    return (
      <div>
        <Nav />
        <Hero />
        <Block />
        <Table />
        <Footer />
        <Modal />
      </div>
    )
  }
}

module.exports = Home;

Ok so I've updated App and Home accordingly but I'm still getting a blank page. No errors.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import { Home } from './Home';


class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path="/" component={Home} />
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

Home.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Nav } from './Nav';
import { Hero } from './Hero';
import { Block } from './Block';
import { Table } from './Table';
import { Footer } from './Footer';
import { Modal } from './Modal';

class Home extends React.Component {
  render(){
    return (
      <div>
        <Nav />
        <Hero />
        <Block />
        <Table />
        <Footer />
        <Modal />
      </div>
    )
  }
}


export default Home;

Upvotes: 0

Views: 3454

Answers (1)

Fernando Poumi&#225;n
Fernando Poumi&#225;n

Reputation: 363

I think the problem is that you're exporting your Home component using CommonJS but trying to import it using the ES2015 syntax. Try exporting your Home component with this syntax instead:

export default Home;

Upvotes: 1

Related Questions