使用 React Router Dom 仅在家里显示侧边栏导航

Question

我制作了一个侧边栏，其中包含“主页”和“搜索”页面的导航。但是，我想要的是，我只需要在“主页”页面上显示侧边栏，而不在“搜索”页面上显示侧边栏。这是我现在拥有的
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;

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

编辑：

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

Answer 1

请注意， a 的所有子元素都<Switch>应该是<Route>or<Redirect>元素。参见相关帖子。而且，如果您<SideBar />只想在 处显示组件<Home />，您可以简单地将其保留在"/home"Route 中：

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>
  )
}

这是一个演示。

PS：您的应用程序中应该只有一个Router，否则很快就会成为一个问题，因为您的应用程序中有两个可用的 React-Router-Context。