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.

Related Query

More Query from same tag