react 路由拦截的时候添加 url 参数

在 React 路由中，可以使用 `withRouter` 高阶组件对组件进行包装，使得组件可以访问到 `history`、`location` 和 `match` 这三个对象，从而实现路由拦截并添加 URL 参数的功能。

具体实现步骤如下：

1. 在需要进行路由拦截的组件上使用 `withRouter` 高阶组件进行包装，例如：

   import { withRouter } from 'react-router-dom';

   class MyComponent extends React.Component {
     // ...
   }

   export default withRouter(MyComponent);

2. 在组件中使用 `history.push` 方法进行路由跳转，并传入一个包含 URL 参数的对象，例如：

   this.props.history.push({
     pathname: '/some-route',
     search: '?param=value',
   });

上述代码中，`pathname` 表示跳转到的路由路径，`search` 则表示 URL 参数部分，其值需要以 `?` 开头。

3. 在其他组件中使用 `this.props.location.search` 获取 URL 参数，例如：

   const { search } = this.props.location;
   const params = new URLSearchParams(search);
   const paramValue = params.get('param');

上述代码中，`search` 表示 URL 参数部分，`URLSearchParams` 是一个原生的 API，可以方便地对 URL 参数进行解析和操作。

通过以上三个步骤，就可以在 React 路由中实现路由拦截并添加 URL 参数的功能。