Using next(false) or next(error) while navigating to a component manually doesn't redirect to any component

Version

3.1.3

Reproduction link

https://codesandbox.io/s/repro-history-yigiu?fontsize=14&hidenavigation=1&theme=dark"

Steps to reproduce

1. Click in redirect with parameter, the variable will be passed to the component
2. Click in redirect without parameter, the component will note that there’s no variable and will cancel the navigation
3. Try manually navigating to the component “/query” and no component will render at all.

What is expected?

Redirection to the root (‘/’) component (it should be ‘Main’ in this case)

What is actually happening?

Redirection to an empty component (as the ‘from’ gives out an empty route)

---

I was trying to fetch some data from the backend, I needed a boolean flag from the server whether or not should I render this view at all, or just display some error message and handle the exception, calling next(new Error()) and handling the error accordingly with router.onError(); works when I’m accessing the component within the application, but doesn’t when I navigate manually to the component. I can work around this just doing next(from.path), but it won’t trigger the .onError() I mentioned earlier.

[posva]

check if from.name === null in the guard

[posva]

This is intended because nothing is telling the application that it should go to the main route if the initial navigation fails, so it stays in a nowhere state which is the initial state of the router. The main route could also have navigation guards that should be checked. You need to trigger a navigation to the route you want to go in your specific case