reactjs - 在 ReactJs 中添加查询参数时返回按钮不起作用

Question

让我介绍一下我正在做的导致问题的原因。我的 React Web 应用程序中有 3 条路由：

1. "/"为主页。
2. "/page2"对于第 2 页。
3. "/page3"对于第 3 页。

现在，当我继续进行路由时"/page2"，我正在做什么，我在 URL 中推送一个查询参数，以呈现 page2 中的默认选项卡，使 URL 为"/page2?activeTab=tabId“。所以简而言之，当我尝试去"/page2"它时，它将始终将 URL 设为"/page2?activeTab=tabId".

现在的问题是当我第一次登陆 Page2 并尝试按下浏览器上的后退按钮时。我一次又一次地重新渲染page2。原因是：假设我第一次在 page2 上，并且 URL 将是"/page2?activeTab=tabId". 现在，当我按下后退按钮时，浏览器会删除查询参数并呈现 URL "/page2"。因此，每当 URL 再次呈现我的代码时，都会将其转换为"/page2?activeTab=tabId". 因此，我无法返回并仅停留在第二页。

我需要这方面的帮助。如何消除或避免这个问题？

标签： reactjswebreact-router

Answer 1

您可以检查位置搜索参数，如果为空，则计算新路径 URL 并替换历史记录中的当前位置。

1. 检查位置搜索查询
2. 如果搜索查询为空，则使用查询字符串构造新的路径 URL
3. 重定向（替换）当前页面，以便后退按钮起作用

使用 react-router-dom 的useHistory和useLocation反应钩子

const MyComponent = () => {
  const { replace } = useHistory();
  const { pathname, search } = useLocation();

  useEffect(() => {
    const tabId = <compute tab id>;
    const newPath = `${pathname}?activeTab=${tabId}`;
    if (!search) replace(newPath);
  }, [pathname, replace, search]);

  return (
    ...
  );
};

如果不能使用 react-router-dom 的 react hooks，那么你可以使用withRouter高阶组件来装饰你的组件，并从注入的 props 中访问相同的值。

const MyComponent = ({ history, location }) => {
  const { replace } = history;
  const { pathname, search } = location;

  useEffect(() => {
    const tabId = <compute tab id>;
    const newPath = `${pathname}?activeTab=${tabId}`;
    if (!search) replace(newPath);
  }, [pathname, replace, search]);

  return (
    ...
  );
};

export withRouter(MyComponent);