On url change i want to re render my component how should i do that

Question

i have two links which fetches the sample component but when i click on any one of them it gets loaded and when i click on another one it wont re render only url gets change

Answer 1

I just had the same problem myself using a pure function component like this:

export default function App() {
    const history = useHistory()
    return (
        <>
            
current path is {history.location.pathname}
            click me
            click me
        
    )
}

When you click the links, the URL in the title bar updates but the component does not re-render (i.e. the displayed path doesn't update)

In this case I found the solution is to include a call to useLocation(). You don't even need to do anything with the return value; adding this call makes the component magically re-render when ever the location changes.