React Router传props调用setLoginStatus报不是函数错误如何解决？

核心原因 #

你遇到的props.setLoginStatus is not a function报错，本质是setLoginStatus方法没有被正确传递到LoginPage组件的props对象上，常见的诱因有2种：

• 路由配置写法存在属性透传丢失问题
• LoginPage的高阶组件包裹逻辑阻断了自定义props传递

具体修复步骤 #

1. 首先调整路由配置写法，使用React Router v5官方推荐的render属性传参，避免自定义属性丢失：
   将原有路由代码替换为：

<Route 
  path="/login"
  render={(routeProps) => <LoginPage {...routeProps} setLoginStatus={setLoginStatus} />}
/>

该写法会自动把React Router自带的history、location等路由属性，和你自定义的setLoginStatus方法一起透传给LoginPage组件。

2. 验证LoginPage组件的props接收逻辑：
   如果你用的是函数组件，确保组件正确接收props参数，也可以直接解构出需要的属性：

// 正确接收示例
const LoginPage = (props) => {
  // 可以在开头加打印确认属性存在
  console.log(props.setLoginStatus)
  // 其余业务逻辑
}

// 解构写法更清晰
const LoginPage = ({ setLoginStatus, history }) => {
  // 登录逻辑直接调用即可，不需要再从props上取
}

3. 如果LoginPage被Redux的connect、withRouter等高阶组件包裹，确保高阶组件没有阻断props透传：
   正常的高阶组件默认会透传所有外来属性，如果你自定义了高阶组件的配置，删除自定义的props过滤逻辑即可，示例：

// 标准的connect写法不会阻断透传
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)

4. 可选优化：如果用的是React Router v5.1+版本，可以改用useHistory hook获取路由实例，避免路由属性和自定义属性冲突：

import { useHistory } from 'react-router-dom'

const LoginPage = ({ setLoginStatus }) => {
  const history = useHistory()
  // 登录逻辑里直接调用history.push("/")即可，不需要从props取history
}

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