使用react-router-dom时转发Ref为何返回null？

问题重现 #

在App.js中创建ref并挂载到DOM元素，通过路由将该ref作为props传递给Homepage组件，但在Homepage中使用forwardRef()却拿到null值，而在App.js里能正常获取到DOM对象。

App.js 代码片段 #

const canvasView1 = React.createRef();
...
<div ref={canvasView1}/>

// 路由配置
<Route
    index
    path="/welcome"
    element={<Homepage canvasView1={canvasView1}/>}
/>

Homepage.js 代码片段 #

export const Homepage = React.forwardRef((props, canvasView1) => {
    useEffect(() => {
        console.log('# canvasView1 Homepage.js :', canvasView1)
    }, [canvasView1]);
    ...
}

问题原因 #

你混淆了普通props传参和forwardRef的用法：forwardRef的第二个参数是专门接收通过组件的ref属性传递的ref，而不是自定义props里的参数。你现在是把ref作为普通props（canvasView1={canvasView1}）传递的，所以在forwardRef的第二个参数里根本拿不到值，自然返回null。

解决方案 #

方案1：直接通过props获取（无需forwardRef） #

既然是通过props传递ref，直接从props中读取即可，不需要使用forwardRef：

// Homepage.js
export const Homepage = (props) => {
    useEffect(() => {
        // 注意要访问ref的current属性才能拿到DOM对象
        console.log('# canvasView1 Homepage.js :', props.canvasView1.current)
    }, [props.canvasView1]);
    ...
}

方案2：用forwardRef正确转发ref（调整传递方式） #

如果确实需要使用forwardRef，要通过组件的ref属性传递，而不是自定义props：

// App.js 路由部分修改
<Route
    index
    path="/welcome"
    element={<Homepage ref={canvasView1}/>}
/>

// Homepage.js 保持forwardRef写法
export const Homepage = React.forwardRef((props, canvasView1) => {
    useEffect(() => {
        console.log('# canvasView1 Homepage.js :', canvasView1.current)
    }, [canvasView1]);
    ...
}

注意：无论哪种方式，都要通过ref的current属性才能访问到挂载的DOM对象，且useEffect能保证在DOM挂载完成后执行，避免拿到null。

内容的提问来源于stack exchange，提问作者Monstar