How to design tabs in SPA which are preserved on page refreshes?

Question

tl;dr

Is there a recognized correct design of tabbed areas in SPAs that keep the tab selection upon refresh of the page?

---

When searching for "single-page-application css tabs" only 7 results are found, only one of which seems relevant; however that one features only a self-answer and no comments, so I find the reliability of the solution proposed there a bit dubious.

When I asked this question, my approach to have a tabbed area was to have a <nav> with a <ul> in it which contains as many <li> as the tabs, each of which has an <input type="radio" ...>, to let the user select the tab, followed by a <label> to be targeted for styling purposes.

Another solution I had seen on the web is to have the <li> of the solution above contain a for each tab a <a href="#id-of-the-tab">. As regards this solution I didn't understand how to have one tab selected by default, but the answer I accepted explains how to do that, proposing a solution which encodes the information of which tab is selected in a trailing #href-of-the-link-to-the-selected-tab in the URL. On the other hand, it suggests that I don't actually use that solution but try using a "tabs pattern" or "SPA pattern", suggesting this link as a possible reference.

The point is that the link above shows a solution where the information of which tab is selected is not encoded in the URL, so the state of the tabbed area (which tab is selected) is lost upon refreshing the page.

So I searched a bit more to understand the pros and cons of the various solutions and, most of all, to understand whetehr there's a recognized best way of making tabs in a SPA.

I've found a (pretty old, it's from 2010, updated in 2015) post on css-tricks which, as the answer to my other question mentioned above, also makes use of <a href="#id-of-tab">s and corresponding <div id="id-of-tab">s, and the :target selector.

This page proposes a similar, if not the same, solution.

To give me even more confusion, GitHub profile pages (like mine) have tabs encoded in the URL with a trailing ?tab=repositories, but the technique seems to be the same as above: each tab has a <a> in a <nav> (and the <a>s are not even wrapped in <li>s-in-<ul>, which I've understood doesn't help screen readers), but each <a> has a href="?tab=tab-id-or-something" instead of href="#id-of-the-tab".