Link is reloading the page
Answered
Say's Phoebe posted this in #help-forum
Say's PhoebeOP
https://github.com/RohanVashisht1234/zigistry/blob/7d6541f6b74d33fdfc3bc2db81cc7e1b981340eb/pages/components/Header.tsx#L7
When clicking on the navbar link, it is reloading the entire page
When clicking on the navbar link, it is reloading the entire page
Answered by Say's Phoebe
As no body responded to this question, I just found how to fix this issue myself after going through huge amounts of docs working on this, See:
- The _app.tsx needs a layout.tsx which is enough to decide the overall functioning of the pages directory
- The _document.tsx is not needed in this case which was responsible for the issues.
- Its better to use layout.tsx as it is concise and easy to manage
- _document.tsx is required only when it is, don't use _document.tsx when unnecessary, as it can create unnecessary issues as seen here.
- https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
- Thanks to @Polar bear to help me before with the styling of this component .
- The _app.tsx needs a layout.tsx which is enough to decide the overall functioning of the pages directory
- The _document.tsx is not needed in this case which was responsible for the issues.
- Its better to use layout.tsx as it is concise and easy to manage
- _document.tsx is required only when it is, don't use _document.tsx when unnecessary, as it can create unnecessary issues as seen here.
- https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
- Thanks to @Polar bear to help me before with the styling of this component .
3 Replies
Say's PhoebeOP
The issue is that it is not in the center and also it is refreshing the entire page
Say's PhoebeOP
As no body responded to this question, I just found how to fix this issue myself after going through huge amounts of docs working on this, See:
- The _app.tsx needs a layout.tsx which is enough to decide the overall functioning of the pages directory
- The _document.tsx is not needed in this case which was responsible for the issues.
- Its better to use layout.tsx as it is concise and easy to manage
- _document.tsx is required only when it is, don't use _document.tsx when unnecessary, as it can create unnecessary issues as seen here.
- https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
- Thanks to @Polar bear to help me before with the styling of this component .
- The _app.tsx needs a layout.tsx which is enough to decide the overall functioning of the pages directory
- The _document.tsx is not needed in this case which was responsible for the issues.
- Its better to use layout.tsx as it is concise and easy to manage
- _document.tsx is required only when it is, don't use _document.tsx when unnecessary, as it can create unnecessary issues as seen here.
- https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
- Thanks to @Polar bear to help me before with the styling of this component .
Answer
Polar bear
👍 @Say's Phoebe