NextLink 动态路由在动态路由中不起作用

Question

我有一个动态路由 sitename.com/[username] 当我从 sitename.com/account 导航到 sitename.com/[username] 时（例如，当我在 /account 页面中时，我单击一个用户名 abdulkadirkg），它正在工作。但是，如果我在 sitename.com/abdulkadirkg 中并单击另一个用户名 sitename.com/otherusername，尽管 link 已更改，但它不起作用。我的代码在这里；

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

这个我也试过了；

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

完整代码（[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>
    );
}

在ProfileSubscribers.js；

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

Answer 1

路由查询中的username值在useEffect获取用户数据时被引用，它应该被添加到useEffect挂钩的依赖数组中，所以当username值更改 fetchData 使用新值再次调用。

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>
  );
}

NextLink 动态路由在动态路由中不起作用

NextLink Dynamic Route Not Working When In Dynamic Route

reactjs

next.js

next-link