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>

如何防止反应路由器多个组件

1 个答案: