如何为反应路由器编写拦截器？

Question

我想在调用每个使用 react-router 声明的路由时进行拦截，并在其末尾附加一个查询参数。

这样做的原因是我需要在每条路线的末尾附加一组查询参数，但是由于我目前正在处理大型代码库，所以我无法查看每条路线并将其附加.因此，如果我可以编写一些寻求的拦截器，每次调用路由时都会调用该拦截器，然后在其中附加查询参数并传递请求，这将是理想的。

react-router 有这样的功能吗？我正在使用 react-router v4

Answer 1

我能想到的一种方法是 "enhance" 传递给 Provider 的 history 对象...您可以增强 public该对象的方法并在那里添加该功能，基本上你必须 "enhance" push 和 replace 方法。大致是这样的：

function pathInterceptor(path) {
  // TODO Your logic here
  // return an enhanced path that ensures that you have the
  // query string that you need
}

function historyEnhancer(originalHistory) {
  return {
    ...originalHistory,
    push: (path, ...args) =>
      originalHistory.push(pathInterceptor(path), ...args),
    replace: (path, ...args) =>
      originalHistory.replace(pathInterceptor(path), ...args),
  };
}

编辑：

看看 this codesandbox 这个想法的例子。

Answer 2

您可以创建自己的 'RouteProvider' 并从顶级观察路线变化以下内容可能会起作用：

export const RouteParent = ({ match, history }) => {
   useEffect(() => {
       // match object changed, do something
   }, [match])

   return (
       <Switch>
       {/* actual routes here */}
       </Switch>
   )
}

如何为反应路由器编写拦截器？

How to write an interceptor for react router?

reactjs

react-router-v4

编辑：