时间戳

首页 > 解决方案 > 反应路由器添加路由到模态

reactjs - 反应路由器添加路由到模态

问题描述

在我的主页路线'/'中，我显示了许多项目，并且当用户向下滚动时也会对其进行分页。当用户点击一个项目时，他们会被重定向到'/items/:itemId'并显示ItemModal组件。问题是，当我打开例如第 30 个项目然后单击以关闭该模式时，我返回/并再次重新呈现HomePage（它将再次开始显示第一个项目）。我只想在打开时像弹出窗口一样显示ItemModal在上面，而不是让它们感觉像单独的页面。HomePage它类似于 Instagram 在探索页面上的内容，当您单击一个项目时，会出现一个带有自己 url 的模式。

我认为以下示例会帮助我并尝试实现它：https ://reactrouter.com/web/example/modal-gallery 。但是，它没有帮助，HomePage当我关闭模式时仍然会重新渲染。我不知道我是否执行错了，或者我必须寻找其他东西。这是我到目前为止所拥有的：

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 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')  
}

如果有人能指出我可以在这里做什么来实现我想要的，我将不胜感激，因为我仍然很困惑在这里做什么以及解决这个问题的一种可能方法。

标签： reactjsreact-router

解决方案

推荐阅读