使用 React Router 只显示一个组件答案

【问题标题】：Display only one component with React Router使用 React Router 只显示一个组件
【发布时间】：2020-12-24 16:29:07
【问题描述】：

我正在使用 React 以及来自 TMDB 的电影 rest api 创建一个简单的电影应用程序。我的主页欢迎用户展示当今最流行的电影。现在我想在导航栏上插入一个链接以打开另一个显示所有类别的页面。我是 React Router 的新手，所以我可能做错了，但是当我尝试重定向到“类别”组件时，该组件将显示在同一页面上而不隐藏主页。代码如下：

   <Router>
      <Container maxWidth="xl">
        <SearchAppBar handleChange={handleChange} query={query} />
        <TitlebarGridList movies={movies} />
        <Typography
          component="div"
          style={{ backgroundColor: "white", height: "100vh" }}
        />
      </Container>
      <Switch>
        <Route exact path="/categories">
          <Category />
        </Route>
      </Switch>
    </Router>

如果我在浏览器中输入 /category，则类别组件将显示在 App 主页的后面。我怎样才能只显示我想要的那个？谢谢

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

也尝试使用以/ 作为路径的路由来包装容器：


  <Router>
    <Switch>
     <Route exact path="/">
      <Container maxWidth="xl">
        <SearchAppBar handleChange={handleChange} query={query} />
        <TitlebarGridList movies={movies} />
        <Typography
          component="div"
          style={{ backgroundColor: "white", height: "100vh" }}
        />
      </Container>
       </Route>
        <Route exact path="/categories">
          <Category />
        </Route>
      </Switch>
    </Router>

【讨论】：