CODEWITHSUNDEEP
reactjsnext.jsnext-link
Abdulkadir KG
Abdulkadir KG

Reputation: 103

NextLink Dynamic Route Not Working When In Dynamic Route

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

Upvotes: 2

Views: 2395

Answers (1)

Drew Reese
Drew Reese

Reputation: 202836

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

Upvotes: 2

Related Questions