打开模态但不导航到它时更改路线

Question

Instagram example

如上图所示，在用户配置文件中，用户可以单击他的一个帖子，打开包含该特定帖子的模式，此后 url 会更改但不会导航到另一个页面。

我正在尝试在我的应用程序中做同样的事情，我尝试过做 history.push 之类的事情，但它不起作用，我认为这是反应路由器的原因。

Answer 1

要实现您描述的行为，您可以使用 React Router 来管理 URL 更改并显示带有帖子内容的模态。

1. 在您的 React Router 配置中定义一个路由，该路由对应于您要显示的模态内容。例如

   <Route path="/posts/:postId" component={PostModal} />
   

   2. 在您的组件中，包含指向新路由的链接，并将帖子 ID 作为参数。

   <Link to={`/posts/${postId}`}>View Post</Link>
   

   3. 在您的 PostModal 组件中，使用 useParams 挂钩从 URL 访问帖子 ID 参数。然后，从您的 API 或存储中获取发布数据，并显示它。

   import { useParams } from 'react-router-dom';
   
   function PostModal() {
     const { postId } = useParams();
     // Fetch post data and display it in modal
   }
   

   之后，使用 CSS 将模态显示为现有内容之上的叠加层，并使用 JavaScript 适当地显示和隐藏模态。