NextLink Dynamic Route Not Working When In Dynamic Route

Question

I have an dynamic route which is sitename.com/[username] When I navigate from sitename.com/account to sitename.com/[username] (for example when I am in /account page, I click an username which is abdulkadirkg) it is working. But if I am in sitename.com/abdulkadirkg and I click another username which is sitename.com/otherusername although the link has changed it doesn't work. My code is here;

<NextLink href={{pathname:"/[username]",query:{username:subscriber.userName}}} >
    <Typography variant="subtitle2" noWrap>
        {firstName} {lastName}
    </Typography>
</NextLink>

I also tried this;

 <NextLink href={PATH+subscriber.userName} >

Full Code ([username].js);

export default function UserProfile({username}) {
    const router = useRouter();
    const [user, setUser] = useState({});
    const [isSameUser,setIsSameUser] = useState(false);
    if (username === undefined) username = router.query.username;
    const authenticatedUser = useAuth();
    useEffect(() => {
        async function fetchData() {
            await axios.get("/User/GetProfileByUserName/" + username).then(response => {
                setUser(response.data.data);
            }).catch(err => enqueueSnackbar(err.message, {variant: 'error'}))
        }
        fetchData();
        setIsSameUser(username === authenticatedUser.user.userName);
    }, [])
    return (
        <Page title="User: Profile">
            <Container maxWidth={themeStretch ? false : 'lg'}>
                <HeaderBreadcrumbs
                    heading="Profile"
                />
                <Card>
                    <ProfileCover user={user}/>
                </Card>
            </Container>
        </Page>
    );
}

in ProfileSubscribers.js;

 <NextLink href={PATH+subscriber.userName} >

Answer 1

The username value from the route query is referenced in the useEffect fetching user data, it should be added to the useEffect hook's dependency array so when username value changes fetchData is called again with the new value.

export default function UserProfile({ username }) {
  const router = useRouter();
  const [user, setUser] = useState({});
  const [isSameUser, setIsSameUser] = useState(false);

  if (username === undefined) username = router.query.username;

  const authenticatedUser = useAuth();

  useEffect(() => {
    async function fetchData() {
      await axios.get("/User/GetProfileByUserName/" + username)
        .then(response => {
          setUser(response.data.data);
        })
        .catch(err => enqueueSnackbar(err.message, { variant: 'error' }));
    }
    fetchData();
    setIsSameUser(username === authenticatedUser.user.userName);
  }, [username]);

  return (
    <Page title="User: Profile">
      <Container maxWidth={themeStretch ? false : 'lg'}>
        <HeaderBreadcrumbs heading="Profile" />
        <Card>
          <ProfileCover user={user} />
        </Card>
      </Container>
    </Page>
  );
}