NextJs RichText doesn't allow client side routing when content changes

[pschofield]

Describe the Bug

The RichText component in sitecore-jss-nextjs includes code to allow internal links embedded within the rich text field to use client side routing (using the next/router). This is done by adding an event handler to the links when the component renders. This issue occurs when the content in the rich text field changes (e.g. load another page with the same page structure but different content in the rich text field). When the content changes, the useEffect() hook isn't re-run (as it has no dependancies) so the initializeLinks() function is never run on the new content. This means clicking on any internal link within the RichText field doesn't use client side routing and causes a full page load.

To Reproduce

• Create a component that includes a rich text field and assign the initial content.
• Update the content in the rich text field without causing a full page re-load (This could be by using the next/router to nav to another page or assigning new content to the rich text field, by using a button click for example)

Expected Behavior

The initializeLinks() would run on the embedded links within the rich text component when the components first mounts and also when the content is updated

Possible Fix

Add the hasText property to the dependancy array or the useeffect() hook

Provide environment information

• Sitecore Version: 10.2 and 10.3
• JSS Version: 20.0.1, 20.1.3 and 21.1.5
• Browser Name and version: Chrome 113, Firefox 105 and Edge 113
• Operating System and version (desktop or mobile): Windows Server 2016, 2019 and Windows 10

[pschofield]

Raised PR 1503: https://github.com/Sitecore/jss/pull/1503

as a proposed fix.

[art-alexeyenko]

Addressed by #1503 , thank you @pschofield .