Home > Net >  How to render a component only on the start page in React?
How to render a component only on the start page in React?

Time:12-06

I want the "Home" component to only show on the start page. Now it's visible on every page. What should I do? I have tried some options but there is still something I'm missing.

This is my Index.js:

import "./index.css";
import News from "./news";
import Nav from "./nav";
import Home from "./home";
import {BrowserRouter,Route} from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
  <Nav />
  <Route path="/" component={Home}></Route>
    <Route path="/Nintendo"><News newsName="nintendo games" /></Route>
    <Route path="/Playstation"><News newsName="playstation games"/></Route>
    <Route path="/Xbox"><News newsName="xbox games" /></Route>
    <Route path="/PC"><News newsName="pc games" /></Route>
    <Route path="/Retro"><News newsName="retro games" /></Route>
    <Route path="/Indie"><News newsName="indie games" /></Route>
  </BrowserRouter>,
  document.getElementById("root")
);

CodePudding user response:

In this case I believe you can add the exact prop to the route:

<Route path="/" exact component={Home}></Route>
  • Related