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

Question

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

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

User Name > categories > items

我也希望我的网址相应地改变，比如localhost/users/categories/items

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

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

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

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

score 0 · Accepted Answer

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

这是正确的做法。

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

您可以使用浏览器的历史记录来操作 url 而无需重新加载页面。

例如

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

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

1 回答 1