如何在历史堆栈中找到网址

Question

在我的 React typescript 应用程序中，我使用 React Router 来浏览应用程序。工作流程如下：

1. 用户在文本字段中输入搜索词并点击“搜索”
2. 用户被定向到 /search-result?searchterm=abcde 并查看适合此搜索词的结果
3. 用户点击一个结果并登陆相应的个人资料页面，例如/{用户 ID}/概述

用户现在可以导航到例如用户的联系人，路径随后更改为 /{user-id}/contacts

问题是：我在页面顶部有一个面包屑（搜索/搜索结果/{用户名}），当用户单击该面包屑中的“搜索结果”时，我想导航回搜索结果。但我不能这么做

navigate(-1)

因为用户可能已导航到其他网址，例如 /{user-id}/contacts

我可以以某种方式在历史堆栈中搜索以找到包含“/search-result?searchterm=abcde”的 URL 并导航回它吗？

或者我应该更改我的网址模式吗？

Answer 1

我建议您在用户单击面包屑中的“搜索结果”时重定向到特定网址

/search-result

。这样，即使您更改路由的工作方式，该链接也将始终重定向到正确的页面。

const handleSearchClick = () => navigate("/search-result");