At the moment we have a problem with internal links in our content. For example, look at the post entitled "Latest Trip to India". The link to "New7Wonders of the World" at the bottom of the post forces SSR and a page reload.
Another example can be found in the post entitled "Shinjuku Gyoen National Garden". The link "post about the Banff National Park" also forces SSR and a page reload. More examples can be found on the "About Us" page.
Frontity provides a number of components, one of which is <html2react>. This enables us to process our content and replace HTML elements with React components.
We can use <html2react> to replace any <a href="..."> links in our content with the <Link> component. You'll remember that we've previously used the <Link> component directly in our menu and in our list page.
Check the file frontity.settings.js. You should find that "@frontity/html2react" is already included in the packages array of our project.
First we need to import the link processor into our <Root> component, and also add it to the array of html2react processors on the libraries object.
Add this to the root level index.js file.
// File: /packages/my-first-theme/src/index.js
import link from"@frontity/html2react/processors/link";
Now, for our <Post> component in post.js let's pass libraries in as a prop and get the component ready for use.