title: React-Router routing to class components
body: <p>I am trying to route to a class component but it gives me an error. When I change the component to a functional component, the routing works. How do I route to class components?</p>
  
  <p>I am new to using react-router. I first had a functional component to route to. But once I realized the component needs to be a class, I changed it to a class and now the routing shows </p>
  
  <blockquote>
    <p>"Cannot GET /explore/words'.</p>
  </blockquote>
  
  <p>index.js</p>
  
  <pre><code>import React from "react";
  import { render } from "react-dom";
  import { BrowserRouter } from "react-router-dom";
  import App from "./App";
  
  render(
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;,
    document.querySelector("#root")
  );
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  
  import HomePage from "./pages/HomePage";
  import ExplorePage from "./pages/ExplorePage";
  
  function App() {
    return (
      &lt;Router&gt;
      &lt;div&gt;
        &lt;header&gt;
          &lt;nav&gt;Course Finder&lt;/nav&gt;
        &lt;/header&gt;
          &lt;Route path="/" component={HomePage} /&gt;
          &lt;Route path="/explore/:campus" component={ExplorePage} /&gt;
      &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Explore.js</p>
  
  <pre><code>import React, { Component } from "react";
  
  class ExplorePage extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Explore&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ExplorePage;
  </code></pre>
  
  <p>Expected result was to see the 'Explore' heading.
  I get 'Cannot GET /explore/words' instead.</p>