I'm building a recipes app and the component I've built for the home page is rendering on every other route (or page). I'll click to go to the random recipe component I've built, and lo and behold, my home page component is rendered beneath it. This is the case with all of my routes.

How can I make it so the home page component doesn't render on every other page?

import React from 'react';
import hero from './cuttingboard.jpg';
import cooking from './random.jpeg';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import {Link } from 'react-router-dom'

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    return (
      <div className="homepage">
        <div className="hero">
          <img className="cuttingboard" src={hero}></img>
          <h1>Find recipes</h1>
          <div className="hero-p">
            <h3>Lorem, ipsum dolor.</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, recusandae voluptatem ullam commodi perspiciatis, quod libero totam esse odio voluptas culpa dolore cum molestiae voluptates tempore, numquam corrupti ipsum similique.</p>
          </div>
        </div>
        <div className="hero-features">
            <h1>Browse recipes to your hearts' extent</h1>
        </div>
        <div className="home-random">
          <img src={cooking}></img>
          <Link to='/random'>
          <h1>Get random meal</h1>
          </Link>
        </div>
      </div>
    )
  }
}

export default Home;

import React from 'react';
import './App.css';
import Nav from './Nav';
import Meals from './Meal';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import RandomRecipe from './RandomRecipe';
import Home from './Home'


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() { 


  return (
    <Router>
      <div className="content">
       <Nav />
        <Switch>
        <Route path="/meals" exact component={Meals}/>
        <Route path="/random" exact component={RandomRecipe}/>
        </Switch>
      </div>
      <Home />
    </Router>
);
}
}

export default App;