Develop Reference

While using Route the site is not loading , when i am wrapping inside BroswerRoute only its working

this my App.js Code , not able to find any solution .All item are imported and its working fine if its not wrapped in Route
import React from 'react';
import './App.css';
import { BrowserRouter, Route } from "react-router-dom"
import Home from './Pages/Home';
import SignUpPage from './Pages/SignUpPage';
function App() {
return (
<div className="App">
<BrowserRouter>
<Route >
<Home />`enter code here`
</Route>
<Route path='/signup'>
<SignUpPage />
</Route>
</BrowserRouter>
</div >
);
}
export default App;

You're not wrapping your routes correctly, this is how it should be with react-router-dom v6:
import React from "react";
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import SignUpPage from "./Pages/SignUpPage";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
You wrap your routes in a routes component, imported from react-router-dom. You can Then declare your route on one line <Route path="/insertPathHere" element={<YourComponent/>} />

Want to build Header component from Bootstrap template to React but my browser throwing below errors

Want to build Header component from Bootstrap template but my browser is throwing the following error:
Uncaught Error: Invariant failed: You should not use <NavLink> outside a <Router>
The above error occurred in the <Router.Consumer> component
I imported:
import React from 'react';
import { NavLink } from 'react-router-dom';
in my Header.js
and converted my all <a> in <NavLink to='/Shop' >Shop</NavLink>
and my App.js is like this:
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './container/Home';
import Shop from './container/Shop';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';
function App() {
return (
<>
<Header />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/shop' exact component={Shop} />
</Switch>
<Footer />
</>
);
}
export default App;

In your App.js,
Add Router component
Like this
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './container/Home';
import Shop from './container/Shop';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';
import {BrowserRouter as Router} from 'react-router-dom';
function App() {
return (
<>
<Router>
<Header />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/shop' exact component={Shop} />
</Switch>
<Footer />
</Router>
</>
);
}
export default App;

React Project working but not displaying some components

i am trying to build a portfolio website using react and i am using react-router-dom for navigation.
everything was working for a while then i made a stupid mistake of keeping the project in onedrive and had some trouble.
link to code: https://github.com/Raghav-rv28/portfolio-website
Live: https://raghav-rv28.github.io/portfolio-website/, this is not really helpful as we cannot see anything but you can see the screenshots below,
when i run the project on my local machine it runs :
as you can see the elements are there but they just don't appear to me for some reason.
Some of the Code:
import React from 'react'
import {Route, Routes} from 'react-router-dom'
import Layout from './Components/Layout'
import Home from './Components/Home'
import About from './Components/About'
import Contact from './Components/Contact'
import Interests from './Components/Interests'
import Projects from './Components/Projects'
import './App.scss';
function App() {
return (
<>
<Routes>
<Route path="/" element = { <Layout />} >
<Route index element={< Home/>} />
<Route path='About' element={< About/>} />
<Route path='Contact' element={< Contact/>} />
<Route path='Interests' element={< Interests/>} />
<Route path='Projects' element={< Projects/>} />
</Route>
</Routes>
</>
);
}
export default App;
Layout.js:
import React from 'react';
import './index.scss';
import SideNavbar from '../SideNavbar/index';
import { Outlet } from 'react-router-dom';
export default function Layout(){
return(
<div className="App">
<SideNavbar />
<div className="page">
<Outlet />
</div>
</div>)
}
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);

You nested your routes for (Home, About, Contact, etc.) inside the "Layout" route. This means that react router will render BOTH "Layout" and whichever component is provided by a matching nested route.
Try restructuring your routes like this:
<>
<Routes>
<Route path="/" element = { <Layout />} />
<Route index element={< Home/>} />
<Route path='About' element={< About/>} />
<Route path='Contact' element={< Contact/>} />
<Route path='Interests' element={< Interests/>} />
<Route path='Projects' element={< Projects/>} />
</Routes>
</>

Turns out my stupid As* forgot to import the animation library i'm using and the opacity for the pages was set to 0.

i want different navbar on my admin routes

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;

React application router

import React, { Component } from 'react';
import './App.css';
import {Switch,Route} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './componants/Navbar';
import ProductList from './componants/ProductList';
import Details from './componants/Details';
import Default from './componants/Default';
import Cart from './componants/Cart';
class App extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path={'/'} Component={ProductList} />
<Route path={'/Details'} Component={Details} />
<Route path={'/Cart'} Component={Cart} />
<Route Component={Default} />
</Switch>
</React.Fragment>
);
}
}
export default App;
Why <switch></switch> not working while I reach any page of my application?

you need to specify like this
<Route exact path="/" component={PlaceOrder} />
<Route path="/updatepredicted" component={UpdatePredicted} />
<Route path="/kitchen" component={Kitchen} />
looks at the path