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

在 React 中，可以使用 React Router 来进行路由拦截和管理。要在路由拦截时添加 URL 参数，可以使用 React Router 的 `Redirect` 组件和 `withRouter` 高阶组件。

首先，需要在路由配置中定义需要拦截的路由，并指定需要跳转的目标路由。例如：

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

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location } // 传递当前路由信息
        }} />
  )} />
);

在上面的代码中，`PrivateRoute` 组件代表需要拦截的路由。如果用户已经登录成功（即 `isAuthenticated` 为 `true`），则可以访问该路由对应的组件；否则，用户将被重定向到登录页面。

需要注意的是，在重定向时，可以通过 `state` 属性传递当前路由的信息。这样，在用户登录成功后，可以根据传递的信息，自动跳转到之前访问的路由。

例如，在登录页面中可以这样获取传递的信息：

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

class LoginPage extends React.Component {
  handleLogin = () => {
    // 登录成功后，跳转到之前访问的路由
    const { history } = this.props;
    const { state } = this.props.location;
    const from = state ? state.from : '/';
    history.push(from);
  }

  render() {
    return (
      // ...
    );
  }
}

export default withRouter(LoginPage);

在上面的代码中，通过 `withRouter` 高阶组件将 `LoginPage` 组件包装起来，以便可以在组件中使用 `history` 和 `location` 属性。在 `handleLogin` 方法中，通过 `history.push` 方法跳转到之前访问的路由。如果之前没有访问过其他路由，则会跳转到根路由（即 `/`）。