I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you