I am very new to react and when i am trying to run the code this is the error i am getting

Line 4:27: 'component' is missing in props validation react/prop-types

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

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" />)}
/>
)
}

export default ProtectedRoute

i am using latest version of react will apricate any help

CodePudding user response：

import React from "react";
import { Navigate, Route } from "react-router-dom";

function ProtectedRoute({ Component, ...restOfProps }) {
  const isAuthenticated = localStorage.getItem("isAuthenticated");
  console.log("this", isAuthenticated);

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

export default ProtectedRoute;

try this one

CodePudding user response：

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

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

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

export default ProtectedRoute