2

I would like to refresh page on click using React Router.

I know, I could use window.location.reload();

But I would like to use some magic from React Router. There is a way to refresh page with React Router or should I use a normal method from window object?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
huhWell
  • 89
  • 1
  • 2
  • 6
  • 1
    What do you want refreshing the page to achieve? A real browser refresh will reload the page (potentially partly from cache), a refresh inside the router may/may not reset some components state depending on how they are set up. – DBS Aug 03 '22 at 09:00
  • @DBS Let's say I need to refresh page to repeat database query – huhWell Aug 03 '22 at 09:03
  • Does this answer your question? [How do I reload a page with react-router?](https://stackoverflow.com/questions/46820682/how-do-i-reload-a-page-with-react-router) – Enfield Li Aug 03 '22 at 09:24

1 Answers1

13

If you are using react-router v6 then try this (take this as an example), it might works!

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
  navigate(0);
}

If you are using old then try this!

Just put that attribute on your Router, and whenever you are on a new Path it will force the page to reload itself.

<Router forceRefresh={true}>
Priyen Mehta
  • 1,096
  • 1
  • 5
  • 19