There is a routing problem that needs to be solved, which is interesting, but I can't realize it

How to realize the routing function like unsplash? When you click the details page on the home page, a pop-up window will open, and the routing information will be changed to the routing information of the details page. When the details pop-up window is closed, the routing information will be changed to the routing information of the home page. When the details pop-up window is used, if the browser refresh function is applied, the real details page will be jumped directly. Can you give a specific implementation plan.

I used the React-router-dom of the react framework and the window.history api, but it was hard to figure out a solution.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import {
BrowserRouter as Router,
Route,
Routes,
Link,
useNavigate,
} from "react-router-dom";
import { createContext, useContext, useState, useEffect } from "react";
const ModalContext = createContext();
const Home = () => {
const navigate = useNavigate();
const { setModalOpen } = useContext(ModalContext);
const openDetailsModal = () => {
setModalOpen(true);
window.history.pushState("/details", "/details", "/details");
};
return (
<div>
<h1>Home Page</h1>
<Link to="/details">Open Details Modal</Link>
<button onClick={openDetailsModal}>Open Details Modal with Button</button>
</div>
);
};
const Details = () => {
const navigate = useNavigate();
const { setModalOpen } = useContext(ModalContext);
useEffect(() => {
return () => {
setModalOpen(false);
};
}, [setModalOpen]);
return (
<div>
<h2>Details Page</h2>
</div>
);
};
const App = () => {
const [modalOpen, setModalOpen] = useState(false);
useEffect(() => {
const storedModalOpen =
localStorage.getItem("modalOpen") || sessionStorage.getItem("modalOpen");
if (storedModalOpen === "true" && !modalOpen) {
setModalOpen(true);
}
localStorage.removeItem("modalOpen");
sessionStorage.removeItem("modalOpen");
}, [modalOpen]);
return (
<ModalContext.Provider value={{ modalOpen, setModalOpen }}>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/details" element={<Details />} />
</Routes>
</Router>
</ModalContext.Provider>
);
};
export default App;

<!-- end snippet -->

You could maybe try something like this:

const Test = () =>{
  const handleClick = ()=>{
    const newUrl = '/new-url';
    window.history.pushState(null, '',newUrl);
  }
  return (
    <button onClick={handleClick}>Change Url Not Page</button>
  )
}

This will update your URL, but will not reload nor change the page! Then you can add all the logic you need to show the popup you need Does it suits your case?
Hope this helps