En un proyecto que acabo de comenzar en reactjs, debo ocultar un elemento cuando cambia la URL. Busqué y no encontré nada útil.
Me gustaría ocultar la barra lateral cuando la URL no es Buscar. Gracias a quien quiera echarme una mano.
import React from 'react'; import { Routes, Route } from "react-router-dom"; import 'bootstrap/dist/css/bootstrap.css'; import 'react-bootstrap'; import './App.css'; import NavBarTop from './components/layouts/header/NavBar_top'; import Sidebar from './components/layouts/Sidebar'; import Home from './components/pages/Home'; import Login from './components/pages/Login'; import Register from './components/pages/Register'; import Search from './components/pages/Search'; import E404 from './components/pages/E404'; function App() { return ( <> <div> <NavBarTop /> <div className="container-fluid maincon"> <Sidebar /> <Routes> <Route path="/" exact element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route path="/search" element={<Search />} /> <Route path="*" element={<E404 />} /> </Routes> </div> </div> </> ); } export default App;Me gustaría ocultar la barra lateral cuando la URL no es Buscar.
Simplemente represente la Sidebar solo con el componente de Search en lugar de incondicionalmente con todo.
<div> <NavBarTop /> <div className="container-fluid maincon"> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route path="/search" element={( <> <Sidebar /> <Search /> </> )} /> <Route path="*" element={<E404 />} /> </Routes> </div> </div> Si desea representar la Sidebar con varias rutas, cree un componente de diseño. Los componentes Route anidados/envueltos se representan en el componente Outlet .
import { Outlet } from 'react-router-dom'; const SidebarLayout = () => ( <> <Sidebar /> <Outlet /> </> );...
<div> <NavBarTop /> <div className="container-fluid maincon"> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route element={SidebarLayout}> <Route path="/search" element={<Search />} /> ... other routes to render with sidebar ... </Route> <Route path="*" element={<E404 />} /> </Routes> </div> </div>hay varias formas de hacerlo... esta es solo una...
export default function Wrapper() { const urlWindow = window.location; console.log(urlWindow.pathname.split("/")[1]); const acceptedPaths = ["login", "register", "search", "test"]; return ( <> <div> navbar <div className="container-fluid"> <div className="row"> {acceptedPaths.includes(urlWindow.pathname.split("/")[1]) ? ( <> <Sidebar /> <MainContent /> </> ) : "Show 404 page"} </div> </div> </div> </> ); } const Sidebar = () => { return <div className="col-md-2">I'm sidebar</div>; }; const MainContent = () => { return <div className="col-md-10">I'm main content</div>; };En primer lugar, necesita importar useLocation en react-router-dom
import { Routes, Route, useLocation } from "react-router-dom"; y App en la función de la aplicación para obtener la ruta URL actual que se usa para verificar /search para ocultar/mostrar la SideBar
function App() { const location = useLocation(); const currentPath = location.pathname return ( <> <div> <NavBarTop /> <div className="container-fluid maincon"> {currentPath === '/search' && <Sidebar />} <Routes> <Route path="/" exact element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route path="/search" element={<Search />} /> <Route path="*" element={<E404 />} /> </Routes> </div> </div> </> ); }