I have this scenario, I have a create page, when user is done from create page it will automatically navigate to list page, in my create page I have set some state values the will be used in list page. From that point everything is working fine. But when I try to reload the list page, the state values is still there but when I try to navigate to other pages and go back to list page the state values is cleared, how can I make state values clear when list page is reloaded after setting state values from create page?
Create Page code:
import { Link, useNavigate } from "react-router-dom";
const CreatePage = () => {
const navigate = useNavigate();
const handleSubmit = async (e: any) => {
//some code here
if (res.status === 201) {
navigate("/post", {
state: {
status: true,
message: "Post successfully created.",
},
replace: true,
});
}
});
};
List Page code:
import { Link, useLocation } from "react-router-dom";
interface LocationState {
status: boolean;
message: string;
}
const ListPage = () => {
const location = useLocation();
const state = location.state as LocationState;
return(
//some html here
<Col>
{state?.status && <ToastNotificationBasic message={state?.message} />}
</Col>
);
};
And because of that, the toast message always showing everytime list page is reload. What am i missinge here? Thank you!