如何在更改 url 时为反应中的项目设置动画？
How to animate items in react while changing the url?
我的应用左侧有一个面板。
在右侧，管理员可以select一个'User Name'。一旦用户名被 selected，我需要获取 selected 用户的类别。从显示的类别中，我可以选择一个将显示所有项目的类别。
User Name > categories > items
我也希望我的url像localhost/users/categories/items
一样相应地改变
左边在这个过程中完全不会改变，所以我不想重新渲染它。目前我有三个页面，都配置了导航。
实际上我想在点击选项时在右侧放置一些动画。我发现的替代方法是定义 onClick 并用一些动画更改组件 - 但这种方法不允许我更改 url.
处理此问题的最佳方法是什么？
我在我的 React 应用程序中使用 next-js。
The alternative i found was to define onClick and change the component with some animation...
这是正确的做法。
...but this kind of does not allow me to change the url.
您可以使用浏览器的 history 来操作 url 而无需重新加载页面。
例如
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
如果您的页面中有 <a href's />，您可能也想覆盖它们的行为，否则它们也会触发页面重新加载。
我的应用左侧有一个面板。
在右侧，管理员可以select一个'User Name'。一旦用户名被 selected，我需要获取 selected 用户的类别。从显示的类别中，我可以选择一个将显示所有项目的类别。
User Name > categories > items
我也希望我的url像localhost/users/categories/items
左边在这个过程中完全不会改变，所以我不想重新渲染它。目前我有三个页面，都配置了导航。
实际上我想在点击选项时在右侧放置一些动画。我发现的替代方法是定义 onClick 并用一些动画更改组件 - 但这种方法不允许我更改 url.
处理此问题的最佳方法是什么？
我在我的 React 应用程序中使用 next-js。
The alternative i found was to define onClick and change the component with some animation...
这是正确的做法。
...but this kind of does not allow me to change the url.
您可以使用浏览器的 history 来操作 url 而无需重新加载页面。
例如
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
如果您的页面中有 <a href's />，您可能也想覆盖它们的行为，否则它们也会触发页面重新加载。