title: React Router 'Home is not defined'
body: <p><strong>EDIT:</strong> Thanks to all you shiny, happy people. The trick is to use import/export syntax to get everything up and running. </p>
  
  <p>I keep getting <code>Uncaught ReferenceError: Home is not defined</code> 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?</p>
  
  <pre><code>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 (
        &lt;BrowserRouter&gt;
          &lt;div&gt;
            &lt;Route exact path="/" component={Home} /&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      )
    }
  }
  
  
  module.exports = App;
  </code></pre>
  
  <p>I also tried <code>var Home = require('./Home');</code> but that didn't work either.</p>
  
  <p>Below is how my Home component is set up.</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;Nav /&gt;
          &lt;Hero /&gt;
          &lt;Block /&gt;
          &lt;Table /&gt;
          &lt;Footer /&gt;
          &lt;Modal /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  module.exports = Home;
  </code></pre>
  
  <p>Ok so I've updated App and Home accordingly but I'm still getting a blank page. No errors.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>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 (
        &lt;BrowserRouter&gt;
          &lt;div&gt;
            &lt;Route exact path="/" component={Home} /&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Home.js</strong></p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;Nav /&gt;
          &lt;Hero /&gt;
          &lt;Block /&gt;
          &lt;Table /&gt;
          &lt;Footer /&gt;
          &lt;Modal /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  export default Home;
  </code></pre>