reactjs – Reload the page in react js

It’s a bit hackish, but you could send a generated GUID in route state to the home path, and check for this to have changed in response to allowing navigation to have occurred by clicking on the home page link. If the route state “id” is updated then reset the state.

index

import { v4 as uuidV4 } from "uuid";

...

<Link
  to={{
    pathname: "/",
    state: uuidV4() // <-- generate an unique id
  }}
>
  Home
</Link>

Home

import React, { useEffect, useState, useRef } from "react";
import { Prompt, useLocation } from "react-router-dom";

const Home = () => {
  const { state } = useLocation();
  const idRef = useRef(state);

  useEffect(() => {
    if (idRef.current !== state) {
      setValue("");
    }
  }, [idRef, state]);

  const data = true;
  const [value, setValue] = useState("");
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div>
      <Prompt when={!!data} message="Are you sure?" />
      <input value={value} onChange={(e) => onChange(e)} />
      <h2>Home</h2>
    </div>
  );
};

Edit reload-the-page-in-react-js

Read more here: Source link