ReactJS, Reach Router, Webpack application
When trying to navigate to home after a condition check. I get a blank page albiet with the correct URL path. It doesn't enter the MyHome component at all and in the browser console I see navigated to http://localhost:[PORT] but no path
Why is it not navigating?
<Router>
<MyRoute path="/*" component={MyOne} />
<MyRoute path="/home" component={MyHome} />
<MyRoute path="/two" component={MyTwo} />}
</Router>
MyRoute.js
const MyRoute= ({ component: Component}) => {
..........
if (!check) {
return navigate(`/home`)
}
return <Component />
}
Edit
Replacing navigate with <Redirect to="/home" noThrow /
> works
Redirect works with componentDidCatch to prevent the tree from rendering and starts over with a new location.
React throws an error which you will see in console logs. NoThrow will prevent the error from displaying as its not a concern
However I will await a reason as to why navigate doesn't work before marking this as an answer