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
– Drew Reese, Commented Mar 11, 2022 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
– Abdulkadir KG, Commented Mar 11, 2022 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
– Drew Reese, Commented Mar 11, 2022 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
– Abdulkadir KG, Commented Mar 11, 2022 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
– Drew Reese, Commented Mar 11, 2022 at 21:42

Drew Reese · Accepted Answer · 2022-03-11 21:46:10Z

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

Collectives™ on Stack Overflow

NextLink Dynamic Route Not Working When In Dynamic Route

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related