fix: error message in console when viewing Research listing page

[dcth628]

PR Checklist

• [X] - Commit messages are descriptive, it will be used in our Release Notes

PR Type

• [X] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Developer experience (improves developer workflows for contributing to the project)

Description

Error message in console when viewing research page.

Git Issues

Closes #3278

Screenshots/Videos

---

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of our monthly maintainers call (first Monday of the month)

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

[thisislawatts]

Hey @dcth628, thanks for raising the PR. My initial thoughts for resolving the error message were that the document structure needed to be adjusted slightly to avoid the problematic behaviour. I am curious why you opted to remove the <Link> component and add navigation to a <div> element?

A few reasons to keep using Link:

• Semantics and Accessibility: <Link> is a semantically appropriate HTML element for navigation purposes. It conveys to both users and assistive technologies that it's a link to another resource. This enhances accessibility, making it easier for users with disabilities to navigate the application.
• SEO Benefits: Search engine crawlers understand <a> tags (which <Link> renders) as navigation elements. This can positively impact search engine optimisation (SEO) by ensuring that the linked pages are properly indexed and ranked by search engines.
• Event Handling: Using <Link> provides built-in event handling for navigation, including keyboard navigation and focus management. This can help maintain expected behaviour across different browsers and platforms without additional implementation effort.

Overall, while there are scenarios where using a <div> for navigation might be necessary (such as complex event handling requirements or specific design constraints), in many cases, sticking with <Link> provides a simpler, more semantically appropriate, and maintainable solution for navigation in React applications.