如何防止反應路由器多個組件

Question

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;

嗨，當我點擊卡片組件時，我想去 SinglePageComponent 但問題是當我去 SinglePageComponent 時，所有組件都呈現

我的 DOM 看起來像：

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

我希望它看起來像這樣。

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

Answer 1

這是因為您正在無條件地呈現標題和主組件。 嘗試這樣做：

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