Estoy creando una aplicación de recetas y el componente que he creado para la página de inicio se muestra en todas las demás rutas (o páginas). Haré clic para ir al componente de receta aleatoria que he creado y, he aquí, el componente de mi página de inicio se muestra debajo. Este es el caso con todas mis rutas.

¿Cómo puedo hacer que el componente de la página de inicio no se muestre en todas las demás páginas?

 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;