React最新版中‘component’缺失props validation报错求助

你的报错来自ESLint的react/prop-types规则，它要求组件接收的props必须定义类型校验，确保传入的参数符合预期。以下是两种解决方式：

方式一：添加prop-types校验（推荐） #

1. 先安装prop-types包（React 15.5+不再内置该库）：

npm install prop-types
# 或
yarn add prop-types

2. 修改组件代码，导入prop-types并定义props校验规则：

import React from 'react'
import { Navigate, Route } from 'react-router-dom'
import PropTypes from 'prop-types'

function ProtectedRoute({ component: Component, ...restOfProps }) {
  const isAuthenticated = localStorage.getItem('isAuthenticated')
  console.log('this', isAuthenticated)

  return (
    <Route
      {...restOfProps}
      render={(props) => (isAuthenticated ? <Component {...props} /> : <Navigate to="/Login" />)}
    />
  )
}

// 定义props校验规则
ProtectedRoute.propTypes = {
  // 指定component是必填的React组件/元素类型
  component: PropTypes.elementType.isRequired
}

export default ProtectedRoute

方式二：临时关闭ESLint规则（不推荐，仅应急用） #

如果你暂时不想添加校验，可以在组件上方添加ESLint注释关闭该规则：

/* eslint-disable react/prop-types */
function ProtectedRoute({ component: Component, ...restOfProps }) {
  // ... 原有代码
}
/* eslint-enable react/prop-types */

额外补充：如果你的项目使用React Router v6，Route组件已不再支持component和render属性，推荐用element属性改写ProtectedRoute，写法会更简洁，但优先解决当前报错即可。

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