optimistic-gold

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?

7 Replies

optimistic-goldOP•3mo 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;

generous-apricot•3mo ago

what is navlink?

afraid-scarlet•3mo ago

Looks like you're using React Router and not Tanstack Router. Different library.

generous-apricot•3mo ago

ha yes. didn't see that 🤪

optimistic-goldOP•3mo ago

Aah sorry about that, I forgot to mention that Bro, is this server only about tan stack?

afraid-scarlet•3mo ago

Yes, this is for Tanstack libraries. You will have better support for their libraries on their Discord. https://discord.gg/xCqb54Y9

optimistic-goldOP•3mo ago

Ok bro thanks I will close this thread then

Gaming

Programming

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

Did you find this page helpful?