جلوگیری از رفرش شدن صفحه موقع استفاده از html string در nextJs

سلام

یک مشکلی که بهش برخوردم این بود که وقتی سرور برای من یک html string میفرستاد، بعد رندر شدن تگ های <a> که لینک داخلی داشت وقتی کلیک میشد باعث رفرش شدن صفحه میشد و حالت وب اپلیکیشن بودن از بین میرفت.

برای اینکه این مشکل رو حل کنم من جستوجو زیادی کردم و به نتیجه ای نرسیدم.

بعد از حل این مشکل خواستم این مقاله رو بنویسم تا دیگران هم استفاده کنند.

فرض کنید این json رو از سرور گرفتیم که توش یدونه html string هستش

{
   html:"<p style="text-align:center;"><strong>برای خرید گلدان مناسب این گیاه میتوانید از طریق </strong><a href="/product/2099"><span style="color: rgb(44,130,201);"><strong>این لینک</strong></span></a> <strong>اقدام کنید</strong></p><p><span style="font-size: 16px;">بونسای کاج کونیکا از درختان همیشه سبز است که به دلیل برگ های سوزنی زیبایی که دارد، بسیار محبوب واقع شده است. رشد نسبتا کندی دارد و از درختان مقاوم به تنش های محیطی است. شکل تاج آن به صورت مخروطی است و برگ های سوزنی آن کامل در هم فرو رفته اند و شکل ظاهری توپری را به درختچه می بخشند. کاج کونیکا نماد دعوت به صلح و آرامش است. هدیه دادن بونسای کاج به معنی استواری، پایداری، و آرزوی عمر طولانی برای افراد است. بونسای کاج کونیکا بسیار قابل توجه است و افراد زیادی علاقه مند به نگهداری از آن در منازل خود هستند.</span></p>"
}

خوب خروجی html string به این شکل هستش

ولی لینکی که بالا هستش به اسم "این لینک" وقتی روش کلیک میشه صفحه با رفرش شدن به صفحه جدید انتقال پیدا میکنه

برای حل این مشکل میتونیم از این تیکه کد استفاده بکنیم.

import HTMLParser from 'html-react-parser'


useLayoutEffect(() => {
    try {
        const section = document.getElementById("root");
        const aList = section.getElementsByTagName("a")

        _.forEach(aList, el => {
            el. = (e) => {
                e.preventDefault()
                const href = el.getAttribute("href");
                router.push(href)
            }
        })
    } catch (e) {
    }
}, [])

return(
<div id={"root"} display={'block'}>
    {HTMLParser(res.dara.html)}
</div>
)