import Navbar from "./components/Navbar.js" import Footer from "./components/Footer.js" import './index.css' import HomePage from "./pages/HomePage/HomePage.js"; import { Routes, Route, } from "react-router-dom"; import ProductPage from "./pages/ProductPage.js"; import CreateProduct from './pages/admin/CreateProduct' function App() { return ( <div className="App"> <> <Navbar/> <Routes> <Route exact path="/" element={<HomePage/>} /> <Route exact path="/product/:id" element={<ProductPage />}/> </Routes> <Footer/> <Routes> <Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} /> </Routes> </> </div> ); } export default App;Como puede ver en la ruta de sarangAdmin, no quiero que aparezcan la barra de navegación y el fotter predeterminados. Quiero crear uno nuevo para el administrador. El problema es que, cuando sigo esta ruta, veo la barra de navegación y el pie de página, pero no mi crear componente. lo que quiero es que no debería ver la barra de navegación y el componente de pie de página y ver mi componente de creación de productos
Creo que es mejor que cambies el componente Footer & Navbar
al principio, agregue la ubicación a la aplicación de parámetros de la
app({ location })y luego
{location.pathname!=='sarangAdmin/create-product'?<Footer/>}Espero que este código te ayude.
import Navbar from "./components/Navbar.js" import Footer from "./components/Footer.js" import './index.css' import HomePage from "./pages/HomePage/HomePage.js"; import {Routes,Route} from "react-router-dom"; import ProductPage from "./pages/ProductPage.js"; import CreateProduct from './pages/admin/CreateProduct' const App = ({location}) => { return ( <div className="App"> {location.pathname!=='sarangAdmin/create-product'?<Navbar/>:null} <Routes> <Route exact path="/" element={<HomePage/>} /> <Route exact path="/product/:id" element={<ProductPage />}/> <Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} /> </Routes> {location.pathname!=='sarangAdmin/create-product'?<Footer/>:null} </div> ); }; export default App;