score:0
the answer by @tolumide is correct, and if you still have problem, remove all occurrences of
overflow-y: auto;
in <scrolltotop>
component, regarding why using
const {pathname} = uselocation()
instead of
const {path} = useroutematch()
here are my conclusion by trying:
uselocation()::pathname
reports where the user is, regardless of where<scrolltotop>
is.useroutematch()::path
reports where the component,<scrolltotop>
, is, regardless of where the user is.
score:2
consider changing your scrolltotop implementation to this:
import * as react from "react";
import { uselocation } from "react-router";
export const scrolltotop = () => {
const { pathname } = uselocation();
react.useeffect(() => {
window.scrollto(0, 0);
}, [pathname]);
return null;
};
export const scrolltotoponmount = () => {
react.useeffect(() => {
window.scrollto(0, 0);
});
return null;
};
note the specific use of uselocation
as against useroutematch
you can read more on the react router docs.
further explanation
to put a better explanation to this:
let's consider a route /names/:id
where id is dynamic.
if you used:
const {path} = useroutematch();
path would only detect the undynamic part of this url, if you were to console.log(path)
, you would get something like:
/names/:id
however, if you used:
const {pathname} = uselocation();
you would get every changes including the dynamic id. so, if you were to console.log(pathname)
you would see:
/names/thedynamicid
where id="thedynamicid"
the documentation gives a clear description of uselocation
the uselocation hook returns the location object that represents the
current url. you can think about it like a usestate that returns a new
location whenever the url changes.
Source: stackoverflow.com
Related Query
- How to scroll to top by default using React Router V5?
- How to use React Router on top of Rails router (not using react-rails gem)?
- How to scroll to top on route change with react router dom v6?
- How to mock history.push with the new React Router Hooks using Jest
- How to keep scroll position using flatlist when navigating back in react native ?
- How to pass params into link using React router v6?
- How to Add Smooth Scrolling Back To Top Button using react js?
- How can I pass data using <Redirect> in react router v4?
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- How to pass the match when using render in Route component from react router (v4)
- How to implement scroll restoration for React Router SPA
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to make a React component fade in on scroll using IntersectionObserver, but only once?
- how to pass props to the route when using react router <Link>
- How do you pass data when using the navigate function in react router v6
- How we can convert client side rendering react js app to server side rendering using react router 4?
- how to set default value in select using react js
- How to add Scroll to top in react
- How to pass data from a page to another page using react router
- How to detect route changes using React Router in React?
- How to refer to data with permalinks using react router
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- React Router scroll page to the top after transition
- How to intercept back button in a React SPA using function components and React Router v5
- How to redirect to not found page if slug doesn't exist using React Router Dom?
- How can I scroll to a page when doing React Router history push in my case
- how to get params using react router dom v5.0.1
- How to fix blank screen when using react router in redux
- How to prevent component from unmounting immediately when using React Router V4
- How to Handle Redirecting to the Same Route (with Query Params) Using React Router v4
More Query from same tag
- Can I use css modules and inline style together on React component in SSR?
- setState doesnot change again once its set
- Creating a PrivateRoute in React using Class component
- Electron react app hot reloading from src folder not working
- Simple pagination for Meteor and ReactJS
- Google Chart Component is being re-rendered in the screen- react js
- How do I add React as a global whilst running unit tests?
- Update Event with Fullcalendar in React
- mailto: is not working on UncontrolledTooltip
- Using the spread operator on an array of filters to create a Firestore query
- React Native - text with background and a gap between multiple lines
- Test a React Component Mount with Jest
- REACT + PHP - blocked my CORS policy only in POST request
- Get a specific data from URL
- Post url-encoded Api in nodejs but still got error
- React TypeError: location is undefined
- Material UI V5 <ListItemButton> onClick not working
- How to update a map() variable inside a React component, onclick?
- react 25+5 clock for freecodecamp test fail
- Refused to execute JSX Babel?
- React - using nested objects as state with hooks to fill form data
- DELETE http://localhost:54178/api/employees 405 (Method Not Allowed)
- How do I read a \n in a string variable typescript
- how to use async function with custom hooks inside useEffects
- React Native "The expo SDK requires Expo to run. .... this code is not running on Expo."
- Uncaught Promises when using UpdateProfile in react firebase
- How can I test an internal method inside a component in React?
- React Material UI Menu Not Closing
- React: Relative positioning of two divs within div
- How do I send props from one component to another component, outside the render?