title: React js show notification after redirecting to the new route
body: <p>So I have two form components and one notification component in a react project. When submitting the first form, the route is redirected to the second form's route, where the notification that the action of the first form was done successfully must appear. How do I achieve that using my current components.</p>
  <p>My AddEmployee.js form (where the action takes place)</p>
  <pre><code>const AddEmployee = () =&gt; {
  
  const { id } = useParams();
  let history = useHistory();
  const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
  const [firstName, setFirstName] = useState();
  const [lastName, setLastName] = useState();
  
  async function handleUpdate() {
      let item = {
          firstName: firstName,
          lastName: lastName,
      }
      //Update API Call Result
  
      if (result.httpStatus === 200) {
          history.push(&quot;/user/&quot; + employeeId); // The route of the second form
          setNotify({
              isOpen: true,
              message: 'Added Successfully',
              type: 'success'
          })
      }
  }
  
  return (
      &lt;&gt;
          &lt;input onChange={e =&gt; setLastName(e.target.value)} name=&quot;lastName&quot; type=&quot;text&quot; /&gt;
          &lt;input onChange={e =&gt; setFirstName(e.target.value)} name=&quot;firstName&quot; type=&quot;text&quot; /&gt;
      &lt;/&gt;
  );
  }
  
  export default AddEmployee;
  </code></pre>
  <p>My SingleEmployee.js form (where the notification must appear)</p>
  <pre><code>const SingleEmployee = () =&gt; {
  
  const { id } = useParams();
  const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
  const [firstName, setFirstName] = useState();
  const [lastName, setLastName] = useState();
  
  async function getSingleUser() {
      //API to get user Info
  
      if (result.httpStatus === 200) {
          setFirstName(result.result[0].firstName);
          setLastName(result.result[0].lastName);
      }
  }
  useEffect(() =&gt; {
      getSingleUser();
  }, []);
  
  return (
      &lt;&gt;
          &lt;label&gt;{firstName}&lt;/label&gt;&lt;br /&gt;                        
          &lt;label&gt;{lastName}&lt;/label&gt;
          &lt;Notification
              notify={notify}
              setNotify={setNotify}
          /&gt;
      &lt;/&gt;
  );
  }
  export default SingleEmployee;
  </code></pre>
  <p>And finally, my notification.js</p>
  <pre><code>export default function Notification(props) {
  
  const { notify, setNotify } = props;
  
  const handleClose = (event, reason) =&gt; {
      if (reason === 'clickaway') {
          return;
      }
      setNotify({
          ...notify,
          isOpen: false
      })
  }
  
  return (
      &lt;Snackbar
          open={notify.isOpen}
          autoHideDuration={2000}
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          onClose={handleClose}&gt;
          &lt;Alert
              severity={notify.type}
              onClose={handleClose}&gt;
              {notify.message}
          &lt;/Alert&gt;
      &lt;/Snackbar&gt;
  )
  }
  </code></pre>
  <p>So the process is when I add a new employee, I should be redirected to the SingleEemployee page, where the notification that says created successfully should appear but only after the page is redirected. How to do that?</p>