forwardRef跟withRouter一起用ref一直是null怎么解决

如果在使用 `forwardRef` 和 `withRouter` 一起使用时，`ref` 一直为 `null`，可能是因为 `ref` 的传递有问题。

在使用 `forwardRef` 时，需要将 `ref` 传递给实际渲染的组件。如果 `withRouter` 包裹的是一个普通组件，那么可以将 `ref` 直接传递给这个组件：

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

const MyComponent = forwardRef((props, ref) => {
  // 使用 ref
  // ...

  // 使用 router 相关的 props
  const { history, location, match } = props;

  // ...

  return <div ref={ref}>Hello world</div>;
});

export default withRouter(MyComponent);

在这个示例中，`ref` 直接传递给了 `<div>` 元素。

如果 `withRouter` 包裹的是一个高阶组件，那么需要将 `ref` 传递给最终渲染的组件。例如：

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

const MyComponent = forwardRef((props, ref) => {
  // 使用 ref
  // ...

  // 使用 router 相关的 props
  const { history, location, match } = props;

  // ...

  const WrappedComponent = props => {
    return <div ref={ref}>Hello world</div>;
  };

  const WrappedComponentWithRouter = withRouter(WrappedComponent);

  return <WrappedComponentWithRouter />;
});

export default MyComponent;

在这个示例中，我们创建了一个名为 `WrappedComponent` 的组件，并将 `ref` 直接传递给了 `<div>` 元素。然后再通过 `withRouter` 包裹这个组件，并返回包裹后的组件。

无论是哪种情况，都需要确保 `ref` 被正确地传递给了最终渲染的元素或组件。