I'm using React-Router with a custom ScrollToTop component to reset the scroll position to the top of the page on navigation. However, I have a specific use case where I need the scroll position to stay the same when clicking…
I'm developing a React application and I'm encountering an error when using the useLocation hook from the react-router-dom library. The error message I receive is: Error: useLocation() may be used only in the context of a component. Here is the…
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Onboarding from './components/Onboarding/Onboarding'; import Login from './components/Login/Login'; function App() { return ( <Router> <div className="flex justify-center w-[386px] h-[800px] mb-6 mt-5 ml-[35%] box-sizing:border-box rounded-sm overflow-auto -z-50">…
I am trying to implement pagination for components named "Shop", Contact and Cart using react-router-dom. To store the URL paths I have used an array. A state variable is used as an array index to retrive specific paths. useRef is…
The errors - App.jsx import React, { useEffect, Suspense, Fragment } from "react"; import { useSelector } from "react-redux"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import RootLayout from "./pages/Root"; import FullPageScroll from "./UI/FullPageScroll"; import NestedFullPageScroll from "./UI/NestedFullPageScroll"; import HeroArea…
I am working on a product website with React and each time I click on a particular menu, it refreshes my entire page instead of just rendering component. export const Header = () => { return ( <header> <a href="/"…
A common pattern in the vast majority of routing system is to allow the refactoring out of groups of routes to reduce complexity and the size of files (and sometimes also to make it easy to apply changes across a…
I create a React Context like: context.ts file import { createContext } from "react"; const Context = createContext({ error: "", setError: () => {}, }); export default Context; I get a child component which need to set a value into…
Can we use RouterProvide on another page that I created outside of the src/ directory as a multi-page React + Vite project? When I try to use RouterProvide on dashboard/main.jsx or app.jsx that is outside src/ folder, that doesn't work.…
I'm using ReactJS to develop my frontend web. The first page with router is /route-1 In the useEffect function after the page loaded, it checks something and needs to redirect to /route-2 using navigate: import { useNavigate } from "react-router-dom"…