Reactjs React路由器将路由添加到modal

在我的主页route

“/”

中，我显示了许多项目，当用户向下滚动时，我还可以对其进行分页。当用户单击一个项目时，他们会被重定向到

'/items/:itemId'

并显示

itemmodel

组件。问题是，当我打开例如第30个项目，然后单击关闭该模式时，我会返回到

/

，并且

主页

会再次重新显示（它将再次开始显示第一个项目）。我只想在打开时像弹出窗口一样在

主页

上方显示

itemmodel

，而不是让它们感觉像是单独的页面。这与Instagram在“浏览”页面上的功能类似，当您单击某个项目时，会出现一个带有自己url的模式

我认为下面的示例会对我有所帮助，并尝试实现它：。然而，它没有帮助，

主页

仍然在我关闭模式时重新呈现。我不知道我是否执行错误，或者我必须寻找其他东西。以下是我到目前为止的情况：

const App = () => {
  const location = useLocation();
  const background = location.state && location.state.background;

  return (
    <Router history={history}>
      <Switch location={background || location}>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/items/:itemId" component={ItemModal} />
      </Switch>
      {background && <Route path="/items/:itemId" children={<ItemModal />} />}
    </Router>
  )
}

const-App=（）=>{
const location=useLocation（）；
const background=location.state&&location.state.background；
返回(
{背景&&}
)
}

const主页=（）=>{
返回(
{items.map（（item）=>{
返回(
);
})}
);
}

const itemmodel=（道具）=>{
const history=useHistory（）；
const{productId}=useParams（）；
常量handleClickBack=（）=>{
goBack（）；
};
返回ReactDOM.createPortal(
....
),
document.getElementById（'item-modal'）
}

如果有人能指出我在这里能做些什么来实现我的目标，我将不胜感激，因为我还不清楚在这里该做什么，以及这个问题的一个可能解决方案是什么

const HomePage = () => {
 return (
   <div id="items-feed-id" className="items-feed">
    {items.map((item) => {
      return (
       <Link key={item.id} to={{ pathname: `/items/${item.id}`, state: { background: location } }}>
         <Item item={item} />
       </Link>
      );
    })}
   </div>
 );
}

const ItemModal = (props) => {
  const history = useHistory();
  const { productId } = useParams();

  const handleClickBack = () => {
    history.goBack();   
  };

  return ReactDOM.createPortal(
    <div className="modal">
     <div className="close" onClick={handleClickBack}></div>
      ....
    </div>
  ),
  document.getElementById('item-modal')  
}