El código para la ruta protegida se proporciona a continuación:
import React, { Fragment } from "react"; import { useSelector } from "react-redux"; import { Redirect, Route } from "react-router-dom"; const ProtectedRoute = ({ isAdmin, component: Component, ...rest }) => { const { loading, isAuthenticated, user } = useSelector((state) => state.user); return ( <Fragment> {loading === false && ( <Route {...rest} render={(props) => { if (isAuthenticated === false) { return <Redirect to="/login" />; } if (isAdmin === true && user.role !== "admin") { return <Redirect to="/login" />; } return <Component {...props} />; }} /> )} </Fragment> ); }; export default ProtectedRoute;Y estoy usando el componente protectedRoute en el archivo app.js como se muestra a continuación:
<ProtectedRoute exact path="/me/update" component={UpdateProfile} />Ahora quiero usar el código para la nueva versión de reactjs. Por favor, ayuda a alguien.
Creo que esto tiene que ver con un cambio de API a React Router . Usamos el element prop en lugar del component :
<ProtectedRoute exact path="/me/update" element={<UpdateProfile />} />