T
TanStack•3w ago
genetic-orange

Navlink redirecting to respective routes (url changes) but UI not updating

See on clicking cards (highlighted in green), they redirecting to respective routes as path (highlighted in red color) getting change. But corresponding note data is not loading automatically, instead if i reload the screen then the data get updated. Can anyone help me to rectify this?
No description
No description
7 Replies
genetic-orange
genetic-orangeOP•3w ago
code I am using to create Cards:- 
import React, { useEffect } from "react";
import { NavLink, useLocation } from "react-router-dom";

function NoteCard({notes}) {


  return (
    <div className='w-full flex flex-col divide-y divide-neutral-300'>
        {
            notes.map((obj) => (
                <NavLink to={`/notes/${obj.id}`} key={obj.id} className="flex flex-col rounded-lg p-2 space-y-3">
                <p className="font-semibold text-base">{obj?.title}</p>
                
                <div className="flex flex-wrap gap-1">
                    {
                        obj.tag.map((t, i) => (
                            <span key={i} className="font-normal text-xs text-neutral-950 rounded bg-neutral-200 px-1.5 py-0.5">{t}</span>
                        ))
                    }
                </div>
                <span className="text-xs font-normal text-neutral-700">{obj.updateDate}</span>
                </NavLink>
            ))
        }
    </div>
  );
}

export default NoteCard;
 
import React, { useEffect } from "react";
import { NavLink, useLocation } from "react-router-dom";

function NoteCard({notes}) {


  return (
    <div className='w-full flex flex-col divide-y divide-neutral-300'>
        {
            notes.map((obj) => (
                <NavLink to={`/notes/${obj.id}`} key={obj.id} className="flex flex-col rounded-lg p-2 space-y-3">
                <p className="font-semibold text-base">{obj?.title}</p>
                
                <div className="flex flex-wrap gap-1">
                    {
                        obj.tag.map((t, i) => (
                            <span key={i} className="font-normal text-xs text-neutral-950 rounded bg-neutral-200 px-1.5 py-0.5">{t}</span>
                        ))
                    }
                </div>
                <span className="text-xs font-normal text-neutral-700">{obj.updateDate}</span>
                </NavLink>
            ))
        }
    </div>
  );
}

export default NoteCard;
like-gold
like-gold•3w ago
what is navlink?
quickest-silver
quickest-silver•3w ago
Looks like you're using React Router and not Tanstack Router. Different library.
like-gold
like-gold•3w ago
ha yes. didn't see that 🤪
genetic-orange
genetic-orangeOP•3w ago
Aah sorry about that, I forgot to mention that Bro, is this server only about tan stack?
quickest-silver
quickest-silver•3w ago
Yes, this is for Tanstack libraries. You will have better support for their libraries on their Discord. https://discord.gg/xCqb54Y9
genetic-orange
genetic-orangeOP•3w ago
Ok bro thanks I will close this thread then

Did you find this page helpful?