React Router Error

1

React Router is changing the URL correctly but isn’t actually displaying the component. Can anyone help?

Here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom'

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

And here is my App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    Homepage
  </div>
);
const About = () => (
  <div>
    <h1></h1>
    <h2></h2>
    <p></p>
    <h2></h2>
    <h3></h3>
    <p></p>
    <h3></h3>
    <p></p>
  </div>
);

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header>
          <img src={logo} alt="Crowdcycle Logo"/>
        </header>
  
  
        <Link to={'/'}>Home</Link>
        <Link to={'/about'}>About</Link>
  
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
  
      </div>
    );
  }
}

export default App;