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;
As you can see in the route of sarangAdmin i dont want the default navbar and fotter appear i want to create a new one for the admin the problem is then when i going on this route i am seeing navbar nad footer but not my create componenet what i want is that i should not see the navbar and footer component and see my create-product componenet
I think it's better that you change Footer & Navbar component
at first add location to app params
app({ location })then
{location.pathname!=='sarangAdmin/create-product'?<Footer/>}
I hope this code will help you
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;