One Page Website Issues With Backwards and Forward Browser Action

I am working on a one page website engine where I load pages into a single DIV. The link is in a DIV such as the one below.

<div id="nav" title="Homepage" data-target="practice-page-1.php" data-value="?url=homepage">Homepage</div>

data-target = is a php file

data-value = a URL that I add at the time the php file is loaded into the content DIV

I am trying to load the correct page into the content DIV when the user uses the back or forward button in the browser. The actual website address never changes, but I append a unique URL to it for different functionalities. I can capture the full URL using the below. The back and forward buttons do move through URLs, but the usual methods to capture these movements don’t work. I need the content in the DIV to move along with browser backward and forward action.

//DETECT ANY NAVIGATION CHANGE AND LOAD PAGE FOR FORWARD AND BACKWARD CHANGES  
        window.navigation.addEventListener("navigate", (event) => {
            var changedURL = event.destination.url;
            console.log(changedURL);
})

changedURL shows the hole URL (example: practice.php?url=page3). I just want the part starting with the question mark and after (my added URL), which is the data-element “value”. I need to cut the value out of the address and then find the corresponding target (practice-page-3.php).

Then I can load that target file into the content DIV just fine.