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

You likely need to use an `useEffect` hook to "listen" for changes on the dynamic part of your route path so it can handle the change or whatever it needs to do with the new value. — Drew Reese, Mar 11 '22 at 20:38
I think that way is not best practice. But if I can't handle it, I will do that way. @DrewReese — Abdulkadir KG, Mar 11 '22 at 20:47
I am not sure what you mean by "not best practice" when that is exactly what `useEffect` hook is for, issuing side-effects as a response to some external change. `useEffect` hook with appropriate dependency is roughly equivalent to `componentDidUpdate` lifecycle method from class components. Perhaps it would be helpful to share an example for what needs to "respond" to this dynamic route changing. — Drew Reese, Mar 11 '22 at 21:26
@DrewReese it's just my opinion. I didn't say "it is wrong". Thank you for your reply. I just want to make some more research before apply your solution. — Abdulkadir KG, Mar 11 '22 at 21:38
No worries, I was curious why. Thanks for the component code example. I can see clearly now that `username` is obviously, and should be, a dependency for the `useEffect` hook fetching data. — Drew Reese, Mar 11 '22 at 21:42

score 2 · Accepted Answer · answered Mar 11 '22 at 21:46

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

NextLink Dynamic Route Not Working When In Dynamic Route

1 Answers1