Deeplinking: React-Router-Dom Redirect to "Not Found Page" is not working when brought into a component through React Context - redirect

Question

I am trying to create Deeplinking in a project, where there is a hierarchical relationship between Redux information.
When a link is pasted into a new browser's URL, it should be able to navigate to that page from the URL. This part is works.
But, if the hierarchical information found through Redux (starting with the jobID > projectID > engagementID > clientID ) doesn't match what is found in Redux then it should redirect to a "Not Found" page.
Here's grabbing the Redux information I need:
With that Redux information, I created this function for the Deeplinking (handleDeepLinkingURL):
If any of the Redux information I'm grabbing returns "undefined" (like if the wrong jobId Guid was entered into the URL), then I want it to redirect to the "Not Found" page.
The handleDeepLinkingURL function is called in the Dashboard component.
It should work like, if I am getting the jobId from the URL (using useParams from React-router-dom) and a Job doesn't already exist in Redux (it does not because we are using deeplinking - I am testing functionality in anonymous browsers and using a fake Guid that would not be found in Redux), then it should call my DeepLinking function, and should be Returning me the "Not Found Page."
Instead, it is loading the dashboard page without the proper data being added to Redux or displayed on the page. (note it's missing from the navigation breadcrumbs)
Here are the Routes in App.tsx
It's loading up the dashboard based on this dynamic route instead of redirecting to the "Not Found" page.
Why won't the redirect functionality found in Context and called in the Dashboard component Redirect like it's supposed to? And instead is still loading the Dashboard instead of Redirecting?
I have console.logged the conditional function calls, and indeed, the Redux information is returning as undefined (and there is no SelectedJob because we are doing Deeplinking), and so it should be calling the first part of the handleDeepLinkingURL function and redirecting to a "Not Found" page.
Instead it is incorrectly loading the dashboard page based on the dynamic routing in App.tsx.

Answer 1

You can't return JSX from functions like this and expect them to be rendered to the DOM to effect any actual navigation action if they are called as callbacks.
Based on the usage of the Redirect component I'll assume you are using react-router-dom#5 and have access to the useHistory hook. The component should use the useHistory hook to access the history object and in the handleDeepLinkingURL callback issue an imperative redirect.
Example:
const history = useHistory();
...
const handleDeepLinkingURL = (jobId: string) = {
... logic ...
if (/* condition to redirect */) {
history.replace("/page-not-found"); // <-- imperative redirect
} else {
... batching logic ...
}
};
If handleDeepLinkingURL is called as part of the render return and is intended that it does actually return JSX to be rendered, then it needs to actually return valid JSX.
Example:
const handleDeepLinkingURL = (jobId: string) = {
... logic ...
if (/* condition to redirect */) {
return <Redirect to="/page-not-found" />; // <-- declarative redirect
} else {
... batching logic ...
return null; // <-- still return valid JSX
}
};
...
if (!isJobSelected && jobId) {
return handleDeepLinkingURL(jobId); // <-- return result
} else if (!isJobSelected && !jobId) {
return <Redirect to="/home" />;
}