This question already has answers here: index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component (2 answers) Closed last month. I’m using useNavigate from react-router-dom to redirect users to different pages of website. I’m passing useNavigate as a prop to my Components so I can evaluate it later when […]

I have an interesting problem. I have a product page and an ‘add item’ button. When the button is clicked the product id will be updated in the ‘items’ array state variable. I’m getting the product id from the url params using ‘useParams’ hook.

App.jsx
<Route path="/shop/:gender/:category?/:categoryId?"> <ProductListPage /> </Route> <Route path="/shop/:filter"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop"> <ProductListPage /> </Route>

I’m new to React and currently working on a project in a tutorial. My app has been working fine with static routes, however, as soon as I introduce react router in my app, I get only blank page without any error. I have been searching for last two days, and tried all given solution such as:

{ path: “/app”, element: <AppLayout />, children: [ { index: true, element: <Navigate to=”discussions” />, }, { path: “discussions”, element: <Discussions />, loader: discussionsLoader, errorElement: ….. } ] } Here is the router structure. In the parent component I check for navigaion.state === “laoding” to render a loading indicator properly. But there is one problem. […]

although this type of question already asked, earlier question do not able to help me.

I’m using Navigate from react-router-dom.

The url shows the correct route but the component is not rendering. I am not getting any error whatsoever.

This question already has answers here: How to pass data from a page to another page using react router (5 answers) Closed 5 mins ago. This post was edited and submitted for review 18 secs ago. I am making a multi-page Online Store web application and I currently stuck on how I pass the user’s […]

I am making a multi-page Online Store web application and I currently stuck on how I pass the user’s input (username) into the welcome message that will show up after logging in such as “weclome back {username}” I am new to react.js so I am trying to keep it simple so I tried to useLocation but it was unsuccessful I was wondering I needed to rewrite my coded or i was thinking to use props? please help??