React Router v6 中未保留历史状态

Question

我正在将 React Router 6.20 与 BrowserRouter 一起使用。我有一个页面，上面有多组选项卡，我试图跟踪为每个选项卡组选择了哪个选项卡，这样，如果他们导航离开，然后单击浏览器中的后退按钮，它将选择相同的选项卡.

我试图将其存储在位置/历史状态对象中，但每当我返回浏览器时，状态都会被清除并设置为 null。

我正在将此应用程序从 v5 迁移到 v6，并根据用 useNavigate() 替换 useHistory() 的文档，我正在执行以下操作。

navigate({ pathname: '.' }, { state: newState, replace: true });

状态似乎设置正确，当我在调用后查看 location.state 时，一切都符合预期。 location.key的值也是一串随机字符串。离开并返回时，location.state 设置为 null，location.key 为“默认”。

我希望 location.state 应该是我上次调用 navigate() 时设置的最后一个值，并且键值应该与第一次导航离开之前的值相匹配。

任何有关我在这里做错的事情的帮助将不胜感激。

Answer 1

您似乎正在尝试将选项卡的状态存储在位置/历史状态对象中，但当您导航回页面时，状态将被清除并设置为 null。您正在将 React Router 6.20 与 BrowserRouter 结合使用，并尝试从 v5 迁移到 v6。您正在使用

useNavigate()

而不是

useHistory()

，并且您正在调用

navigate({ pathname: '.' }, { state: newState, replace: true })

来设置状态。

根据文档，您似乎使用了正确的方法来设置状态。但是，尚不清楚为什么当您导航回页面时状态会被清除。

一个可能的原因可能是您正在使用

replace

中的

navigate()

选项。根据文档，此选项会替换历史堆栈中的当前条目，而不是添加新条目。这意味着当您导航回该页面时，历史记录堆栈中的上一个条目将替换为当前条目，该条目可能不具有您之前设置的状态。

您可以尝试删除

replace

选项，看看是否有帮助。或者，您可以尝试使用

push

选项而不是

replace

，这会向历史堆栈添加一个新条目。