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>
);
};
Read more here: Source link