Reactjs 使用React Router Dom仅在家中显示侧栏导航

我制作了一个侧边栏，导航到“主页”和“搜索”页面。但是，我想要的是，我只需要在“主页”上显示侧边栏，而不需要在“搜索”页面上显示侧边栏。以下是我现在拥有的：

App.js

：

import React from "react";
import "./App.css";

import SideBar from "./components/SideBar";
import Home from "./screens/Home";
import Search from "./screens/Search";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {    
  return (
    <div className="app">
      <Router>
    <Switch>
      <SideBar />
      <Route exact path="/home">
        <Home />
      </Route>
    </Switch>

    <Switch>
      <Route exact path="/search">
        <Search />
      </Route>
    </Switch>
  </Router>
    </div>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“/components/SideBar”导入侧栏；
从“/screens/Home”导入主页；
从“/screens/Search”导入搜索；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
函数App（）{
返回(
);
}
导出默认应用程序；

但是，它在两个页面上都显示了侧边栏

编辑：

---

我不希望侧边栏在路线更改时重新渲染。侧边栏中有指向“主页”和“搜索”页面的链接。我只希望这些页面呈现和重新呈现。

注意

的所有子元素都应该是

或

元素。见下文。而且，如果您只想在

中显示

组件，只需将其保存在

“/home”

路径中即可：

export default function App() {
  return (
    <div className="app">
      <Router>
        <Switch>
          <Route exact path="/home"> {/* Here */}
            <SideBar />
            <Home />
          </Route>
          <Route exact path="/search">
            <Search />
          </Route>
          <Route exact path="/foo">
            <Foo />
          </Route>
        </Switch>
      </Router>
    </div>
  )
}

导出默认函数App（）{
返回(
{/*此处*/}
)
}

这是一本书

---

PS：你的应用程序中应该只有一个

路由器

，否则它很快就会成为问题，因为你的应用程序中有两个React路由器上下文。

你应该使用

开关下的
侧栏
，然后你可以使用
/侧栏
，你想在哪里找到更新的问题。谢谢