I want to know how I can make my "page" variable in the below code dynamic, so I can properly compare it with the location.pathname variable which will have dynamic page ids. import { useLocation } from 'react-router-dom'; function AddToCart()…
I'm having an issue with the page refresh after, when clicking on the button url gets changed in the browser but the page doesn't refresh the correct component, no browser error no terminal error, everything is good at the code…
I've been working through this React tutorial and have gotten stuck. (Chapter 16: React Router). My basic boilerplate html components all render properly in App.js UNTIL I wrapped some inside <Routes> tags and added the path="" and element={} attributes. The…
I have a React + Vite app with multiple routes. I also have a few static HTML pages and assets in the public folder (including home.html). I'd like to have the index route to point to home.html. The code below…
I'm using react-router-dom 5.2.0 App.jsx `<Route path="/shop"> <ProductListPage /> </Route> <Route path="/shop/:page"> <ProductListPage /> </Route> <Route path="/shop/:gender/:category?"> <ProductListPage /> </Route> <Route path="/shop/:filter"> <ProductListPage /> </Route>` ProductListPage.jsx `import { useParams } from "react-router-dom"; export default function ProductListPage() { let { page…
I am writing a website in ReactJS and I am using Mantine for styling. When I try to use react router as seen below, the mantine components no longer work. import { StrictMode } from 'react'; import { createRoot }…
I am using React router dom v6, and the "useHistory" method is not available in the React router v6 version. Please suggest me how I can implment below code with React Router com v6 version history.listen(onParentNavigate); export default () =>…
I am working on an API project using React-Router-DOM for navigation and when the initial search results are called I have an array of 8 movies that are shown based on a keyword from the user's search query. Once the…
[1]I'm working on a React application and recently added new routes to my App.jsx file. However, after adding these routes, my application only shows a white screen. When I remove the new code, the landing page displays correctly again. Here…
I am implementing react-router-dom to handle routing. The routing works for the most part however my Header component is not visible when the user visits AccountHome My router is very simple: const router = createBrowserRouter([ { path: "/", element: <AppLayout…