react-router v6中如何使用浏览器后退按钮关闭Modal答案

【问题标题】：How to use the browser back button to close a Modal in react-router v6react-router v6中如何使用浏览器后退按钮关闭Modal
【发布时间】：2022-01-01 14:36:36
【问题描述】：

我有一个简单的模式，当 React 组件单击缩略图时，它会显示更大版本的图片。我希望在浏览器中按下后退按钮而不是默认行为时关闭模式。我已经看到使用 browserHistory() 回答了这个问题，但是在 v6 中它已被替换为 useNavigate()，我不确定如何实现。

编辑：我实现了以下答案，但是我必须将模式中的路由嵌套在父组件的路由中，然后在父组件中添加一个。如果您只是创建两个单独的路由，它将在模式组件挂载时卸载父组件。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

是的，您可以...这是您可以采取的（众多）方法之一。首先，您必须使用 url 来确定模态是否打开。

例如

/photos显示照片列表页面
/photos/:id显示照片的详细模态

你可以做这样的事情

<Routes>
  <Route path="/photos" element={<PhotoList />} />
  <Route path="/photos/:id" element={<PhotoDetailModal />} />
</Routes>

请注意，我没有在 /photos Route 中输入“精确”，因为我希望照片页面仍会显示在模式下方。

在照片列表页面中，您只需更改 url 即可打开模式

// Your Photo's list

<Link to={`/photos/${photo.id}`}>
  <img src="your photo" />
</Link>

现在浏览器历史记录将作为您的朋友使用，并且后退按钮将关闭模式（因为它将 url 从 /photos/1 更改为 /photos

【讨论】：

谢谢，这很有意义。我从错误的角度解决问题。