如何在更改 url 时为响应中的项目设置动画？

Question

我的应用左侧有一个面板。

在右侧，管理员可以选择“用户名”。选择用户名后，我需要获取所选用户的类别。从显示的类别中，我可以选择一个显示所有项目的类别。

User Name > categories > items

我还希望我的 url 像localhost/users/categories/items 一样进行相应更改

在这个过程中左侧根本不会改变，因此我不想重新渲染它。目前我有三个页面，配置了导航。

实际上我想在单击选项时在右侧放置一些动画。我发现的替代方法是定义 onClick 并使用一些动画更改组件 - 但这种不允许我更改 url。

处理这个问题的最佳方法是什么？

我在我的 react 应用程序中使用 next-js。

Answer 1

我发现的替代方法是定义 onClick 并使用一些动画更改组件...

这是一个正确的方法。

...但是这种不允许我更改网址。

您可以使用浏览器的history 来操作网址而无需重新加载页面。

---

例如

const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);

如果您的页面中有<a href's />，您可能也希望覆盖它们的行为，否则它们也会触发页面重新加载。