我正在尝试访问React路由器的历史堆栈。
下面是我想做的:
我使用react.js和react-router创建了一个讨论板。
如果用户单击图板上的某个列表,则会转到详细信息页面。
假设用户点击列表中id为3的文章,react-router会转到id为3的文章的详细页面,URL表单将在下面。
localhost:3000/board/3
在详细信息页面中,有转到列表按钮,当用户单击它时,页面将再次移动到列表页面,我将在这里使用history. back()。
到目前为止,使用react-router很容易实现。
然而,还有另一个页面,用户可以访问详细信息页面,让我们说配置文件页面。
如果用户通过配置文件页面访问详细信息页面,转到列表按钮的行为应该不同。它将用户推到用户列表页面。
综上所述,转到列表按钮的工作原理如下:
board -> detail -> click go to the list -> board
profile -> detail -> click go to the list -> user-list
为了根据用户所在的位置将用户推到不同的页面,我需要查看用户来自哪里,因此我需要查看历史堆栈,或者有没有其他方法可以检查用户来自哪个URL?
3条答案
按热度按时间iklwldmw1#
使用
react-router-dom
,您将无法直接访问浏览器的历史对象(即历史堆栈),但您不一定需要这样做,因为您可以使用路由状态来发送“ meta”数据沿着关于用户从何处导航的路由转换。Link to: object
对于示例路由:
<Route path="/detail">....</Route>
您可以有多个指向页面的链接,每个链接提供唯一的状态。示例链接:
或
或用于命令式导航
路由状态放置在location对象上,访问
Details
组件中的路由状态,并相应地发出后续导航。或用于命令式导航
6qfn3psc2#
历史/ useHistory在React路由器v6中不再可用。您可以使用useNavigate和位置状态属性来确定从何处导航到当前位置。如here中所述。
告诉下一个页面用户来自哪里,并对用户界面进行分支。这里最流行的实现是,如果用户在网格视图中点击了某个项目,则以模态显示记录,但如果用户直接显示到URL,则以其自己的布局显示记录(pinterest,旧的instagram)。
您可以通过两种方式设置位置状态:在链接组件上或导航:
在下一页中,您可以使用useLocation访问它:
浏览器后退操作可以使用执行
6l7fqoea3#
在我们的导航中,我们传递历史记录(代码块1)。在基于函数的组件中,我们将拥有完整的历史记录堆栈(代码块2)。请参考URL了解更多详细信息。
网址:https://v5.reactrouter.com/web/api/history
代码块1
代码块2