CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Umut Palabiyik
Umut Palabiyik

Reputation: 323

how to prevent react router multiple component

import "./App.scss";
import Header from "./containers/Header/Header";
import Home from "./containers/Home/Home";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import SingleMoviePage from "./containers/SingleMoviePage/SingleMoviePage";

const App = () => {
  return (
    <Router>
      <Switch>
        <div className="app">
          <Route exact path={"/" | "/page"}>
            <Header />
            <Home />
          </Route>
          <Route path="/movie/:page/:genre/:id" component={SingleMoviePage} />
        </div>
      </Switch>
    </Router>
  );
};

export default App;

Hi.When i click to card component i want to go SinglePageComponent but issue is when i go to SinglePageComponent all components render

and my DOM looks like:

<div class="app">
<div class="header">...</div>
<div class="home">...</div>
<div class="single-movie">...</div>
</div>

I want it look like this.

<div class="app">
<div class="single-movie">...</div>
</div>

Upvotes: 0

Views: 59

Answers (1)

Rao Virinchi
Rao Virinchi

Reputation: 329

This is because you are rendering your header and home components unconditionally. Try doing this:

<Router>
     <div className="app">
      <Switch>
          <Route exact path={["/","/page"]} render= {()=>{
             return(
                <Header/>
                <Home/>
                   )}
            }/>
          <Route path="/movie/:page/:genre/:id" component={SingleMoviePage} />
        </Switch>
      </div>
    </Router>

Upvotes: 1

Related Questions