Quiero mostrar u ocultar NewsLetter según la ruta actual. Por ejemplo, lo quiero oculto para las páginas de inicio de login y register , es decir, (ruta de inicio de sesión y registro). He intentado usar useLocation pero no se puede usar fuera del enrutador.
Espero obtener una buena solución para poder renderizar la barra de navegación y el pie de página en condiciones similares. Aquí está mi código actual dentro App.js :
<BrowserRouter> <Wrapper> <Announcement /> <Navbar /> <Routes> <Route index path="/" element={<Home />}></Route> <Route path="/products" element={<ProductList />}></Route> <Route path="/products/:category" element={<ProductList category="true" />}></Route> <Route path="/product/:id" element={<Product />}></Route> <Route path="/register" element={isAuthenticated ? <Navigate replace to="/" /> : <Register />}></Route> <Route path="/login" element={isAuthenticated ? <Navigate replace to="/" /> : <Login />}></Route> <Route path="/account" element={isAuthenticated ? <Navigate replace to="/" /> : <Account />}></Route> <Route path="/forgot-password" element={isAuthenticated ? <Navigate replace to="/" /> : <ForgotPassword />}></Route> <Route path="/cart" element={<Cart />}></Route> <Route path="/wishlist" element={<Wishlist />}></Route> <Route path="/orders/tracking" element={<Tracking />}></Route> <Route path="/orders/checkout" element={<Checkout />}></Route> </Routes> <Newsletter /> </Wrapper> <Footer /> </BrowserRouter> Simplemente puede dejar el componente Newsletter donde está dentro de BrowserRouter y cambiar su contenido como se muestra a continuación. Al usar useLocation , representa su contenido o devuelve un JSX vacío según la ruta.
import { useLocation } from "react-router-dom"; const Newsletter = () => { // ... const { pathname } = useLocation(); // ... if (pathname === "/login" || pathname === "/register") { return <></>; } // render actual content return <div></div>; }; export default Newsletter; Otra forma es controlar todo en un solo lugar creando un Layout.js , así:
import { Outlet, useLocation } from "react-router-dom"; const Layout = () => { const { pathname } = useLocation(); return ( <> <Announcement /> <Navbar /> <Outlet /> {pathname !== "/login" && pathname !== "/register" && <Newsletter />} </> ); }; export default Layout; Luego cambie sus rutas configuradas como se muestra a continuación. Observe el componente Layout . Asegúrate de importarlo:
<BrowserRouter> <Wrapper> <Routes> <Route element={<Layout />}> <Route index path="/" element={<Home />}></Route> <Route path="/products" element={<ProductList />}></Route> <Route path="/products/:category" element={<ProductList category="true" />}></Route> <Route path="/product/:id" element={<Product />}></Route> <Route path="/register" element={isAuthenticated ? <Navigate replace to="/" /> : <Register />}></Route> <Route path="/login" element={isAuthenticated ? <Navigate replace to="/" /> : <Login />}></Route> <Route path="/account" element={isAuthenticated ? <Navigate replace to="/" /> : <Account />}></Route> <Route path="/forgot-password" element={isAuthenticated ? <Navigate replace to="/" /> : <ForgotPassword />}></Route> <Route path="/cart" element={<Cart />}></Route> <Route path="/wishlist" element={<Wishlist />}></Route> <Route path="/orders/tracking" element={<Tracking />}></Route> <Route path="/orders/checkout" element={<Checkout />}></Route> <Route> </Routes> </Wrapper> <Footer /> </BrowserRouter>Puede ser que estés buscando esto:
window.location.pathnameTal vez intente con la ruta anidada usando el componente Outlet en Newsletter
<BrowserRouter> <Wrapper> <Announcement /> <Navbar /> <Routes > <Route exact path="/" element={<Newsletter />} > <Route index element={<Home />}></Route> <Route path="products" element={<ProductList />}></Route> <Route path="products/:category" element={<ProductList category="true" />}></Route> <Route path="product/:id" element={<Product />}></Route> <Route path="register" element={isAuthenticated ? <Navigate replace to="/" /> : <Register />}></Route> <Route path="login" element={isAuthenticated ? <Navigate replace to="/" /> : <Login />}></Route> <Route path="account" element={isAuthenticated ? <Navigate replace to="/" /> : <Account />}></Route> <Route path="forgot-password" element={isAuthenticated ? <Navigate replace to="/" /> : <ForgotPassword />}></Route> <Route path="cart" element={<Cart />}></Route> <Route path="wishlist" element={<Wishlist />}></Route> <Route path="orders/tracking" element={<Tracking />}></Route> <Route path="orders/checkout" element={<Checkout />}></Route> </Route> </Routes> </Wrapper> <Footer /> </BrowserRouter>y en el componente Newsletter
const Newsletter = () => { ... your conditions return ( <Outlet /> ... newsletter content ) }