Show Sidebar Navigation only at Home using React-Router-Dom V6-CodePudding

I have this solution but, How to Achieve this in V6 ?

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

As switch is gone, Routes are not allowing to wrap the element directly.

CodePudding user response：

With the new v6 of react-router, you can use Routes component instead of Switch. See the official documentation
Tho have content inside Route you need to pass content to element prop.

Also exact is not supported anymore since there is no need for it now, the router matches that path directly:

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