Question

我试图在react应用中拦截历史记录调用，并在尝试路由到特定路径时操纵它以更改url的搜索参数。我已成功收听，但是更改位置参数或替换历史记录（我想添加?default_param=value）无效。它仍然使用旧参数更改位置。我的示例代码：

import createHistory from 'history/createBrowserHistory';

const history = createHistory();

history.listen(() => {
  if (
    history.location.pathname === '/path-to-manipulate' &&
    !history.location.search
  ) {

    const unblock = history.block();

    // this one doesn't change current redirection
    history.push({
      pathname: '/path-to-manipulate',
      search: '?default_param=value',
    });

    /* this one is also not working 
    history.replace({
      pathname: '/path-to-manipulate',
      search: '?default_param=value',
    });
    */

    unblock();
  }
});

很久以前，有history.listenBefore() https://github.com/ReactTraining/history/issues/379，但已从api中删除，现在我们有了history.block()。我尝试了无块和无块，将替换/推动/转发与事件更改history.location显式组合在一起。这些都让我无法在更改之前正确拦截位置，对其进行更改并使用新参数?default_param=value执行。

如何在执行并重定向之前正确拦截位置更改并对其进行更改（位置参数）？

还有两件事：

我不想惹上<Link to=...> 组件并在那里实现逻辑。我想要全局的东西，可以在react应用中管理更高级别的路由。
listen（）在浏览器中输入url时不起作用，仅当在应用中使用路由时才起作用。有没有其他方法可以在React应用程序中的某个位置上获取第一个参考？

Answer 1

我通常要做的是尝试读取default_param值，如果没有返回值，我将返回<Redirect to... />

“我想要全局的东西，可以在react应用程序中管理更高级别的路由。” 为什么？您想针对一个非常具体的问题寻求整体解决方案吗？如果此问题经常发生（您需要默认参数），则可以编写一个HOC，它接受一个参数和一个默认值，然后返回<Redirect />或包装的组件取决于您在url中是否有参数

使用React Router历史记录拦截和处理浏览器历史记录

1 个答案: