Reach Router Navigate Changes URL Path But Does Not Render Component

1k Views Asked by At

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

0

There are 0 best solutions below