I have a nested react router route where the nested route is defined in a separate component from the main router switch. I created a link in one of the nested route’s components that will take a user to a page/component in the main router switch. However, when clicking on this link, the url displays correctly, but I get a blank page. It is only when I hit the refresh button that the page displays correctly. How do I get the page to display correctly without hitting refresh? Funny thing is when I use a and set the href to the page, the link works correctly.

Thanks!

CodePudding user response：

It's probably an invalid URL. Try adding a 404 page and see if that's what you get instead.

https://v5.reactrouter.com/web/example/no-match

Short of that, it might be a problem with what components you are trying to render.

CodePudding user response：

I had an additional router listed in one of the components. Once I got rid of that, everything worked.