Multiple React-Router Redirects Fall Through without Redirecting on Time

Question

At the top of my component's render I have a series of conditional Router <Redirect>s. It's not an If-Else, but the understanding is that if it satisfies the condition, it will redirect.

However, I'm finding that these <Redirect>s somehow fall through. If the 3rd condition is satisfied it will be the last to perform its redirect, even if the 1st one was satisfied also. The debugger doesn't stop when the 1st condition is satisfied and continues rendering the component.

{/* If form is submitted in the Submit mode with the ChangeApprover scenario, redirect to /agreements with the Submit ChangeApprover success message */}
{ (isFormSubmitted && submitValidationMode && isChangeApprover) 
  &&
    <Redirect to={"/agreements?result=submitChangeApprover&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
} 

{/* If form is submitted in the Submit mode from the Renew mode, redirect to /agreements with the Renew success message */}
{ (isFormSubmitted && submitValidationMode && props.mode === 'renew') 
  &&
    <Redirect to={"/agreements?result=renew&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
} 

{/* If form is submitted in the Submit mode from a non-Renew mode, redirect to /agreements with the Submit success message */}
{ (isFormSubmitted && submitValidationMode && props.mode !== 'renew')
  && 
    <Redirect to={"/agreements?result=submit&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
}

No, that's not the way to go. I can `return` if I'm inside JS, or I can omit this if I'm inside JSX. This aspect doesn't matter. What matters is the Redirect doesn't immediately redirect. — gene b., Sep 07 '21 at 12:58

score 0 · Answer 1 · answered Aug 16 '21 at 23:44

Going off of this accepted answer: React Router v4 Redirecting on form submit try returning?

{/* If form is submitted in the Submit mode with the ChangeApprover scenario, redirect to /agreements with the Submit ChangeApprover success message */}
{ (isFormSubmitted && submitValidationMode && isChangeApprover) 
  &&
   return <Redirect to={"/agreements?result=submitChangeApprover&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
} 

{/* If form is submitted in the Submit mode from the Renew mode, redirect to /agreements with the Renew success message */}
{ (isFormSubmitted && submitValidationMode && props.mode === 'renew') 
  &&
   return <Redirect to={"/agreements?result=renew&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
} 

{/* If form is submitted in the Submit mode from a non-Renew mode, redirect to /agreements with the Submit success message */}
{ (isFormSubmitted && submitValidationMode && props.mode !== 'renew')
  && 
   return <Redirect to={"/agreements?result=submit&approver=" + encodeURIComponent(detailedApproverUserInfo ? detailedApproverUserInfo.firstName_lastName_regular : "N/A")} /> 
}

Multiple React-Router Redirects Fall Through without Redirecting on Time

1 Answers1