Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `PrivateRoute`, expected `function`

Question

Warning: Failed prop type: Invalid prop children of type object supplied to PrivateRoute, expected function.

import React from "react";
import propTypes from "prop-types";
import { useSelector } from "react-redux";
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = (props) => {
  const auth = useSelector((state) => state.login.isAuth);
  console.log(auth);
  return (
    <Route
      {...props}
      render={({ location }) => auth ? (props.children) : (
        <Redirect to={{ pathname: "/login", state: { from: location } }} />
      )
      }
    />
  );
};
PrivateRoute.propTypes = {
  children: propTypes.func,
};

export default PrivateRoute;

Answer 1

Проблема в том, что у вас не существует children в props на момент рендера, скорее всего это поможет:

const PrivateRoute = (props) => {
  const auth = useSelector((state) => state.login.isAuth);
  console.log(auth);
  return props.children && (
    <Route
      {...props}
      render={({ location }) => auth ? (props.children) : (
        <Redirect to={{ pathname: "/login", state: { from: location } }} />
      )
      }
    />
  );
};

Если не помогло, то у вас неверное обращение к props или неверная передача.

БЛОГ НА HUSL

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `PrivateRoute`, expected `function`

Ответы (1 шт):