When I click over Home and New Blog, my page address changes but It doesn't show relevant pages. While if I change the Link tag to a tag it does navigate fine. What's the problem with my Link tags?

I think anything is correct. It is a link to my project: https://codesandbox.io/s/loving-franklin-8n9mui?file=/src/Navbar.js

I use this for local server: npx json-server --watch data/db.json --port 8000

CodePudding user response：

Looks like a bug in react-router-dom, after updating to version 5.3.3 it starts working.

Update:

Here is the issue and fix:

https://github.com/remix-run/react-router/issues/7870

https://github.com/remix-run/react-router/pull/8831

The problem is that react-router 5 was not compatible with the React 18 StrictMode <React.StrictMode>. This issue was fixed in version 5.3.3.

CodePudding user response：

Well, when you change the Link into a it works because the a makes a hard reload for the entire page. that leads to reloading the application. that's why we use it when building forms. e.preventDefault(). to not reload the page. what Link do for you here. that it doesn't reload the page for you. your problem here. that you needed to not include the Router tag into your route file. instead, make it in the index.js file. to be used globally within your app. I fixed it for you. that's the demo.

New Update:

The problem is that react-router-dom v5 is in conflict with react v18.0.0. you might need to update the react-router-dom and try it.