使用react-router的新v6，您可以使用Routes组件代替Switch。
如果Route中有内容，则需要将内容传递给element属性。
此外，由于现在不需要exact，因此不再支持exact，路由器直接匹配path：

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

有点晚了。但是。也许侧边栏的“直接”注入选项不适合你。最佳实践，没有侧边栏过多的重新渲染/生命周期：

<Routes>
             <Route element={<SideBar />}
                 <Route
                  path="/home"
                  element={<Home />}
                 />
             /** ... some other routes with sidebar here ... */
             </Route>

              <Route path="/search" element={<Search />}></Route>
              <Route path="/foo" element={<Foo />}></Route>
           </Routes>