How to write code by the new rules of reactjs version

Question

The code for the protectedRoute is given below:

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;

And I am using the protectedRoute component in the app.js file as show below:

 <ProtectedRoute exact path="/me/update" component={UpdateProfile} />

Now I want to use the code for the new version of reactjs. Please help someone.

Answer 1

I believe this has to do with an API change to React Router. We use the element prop rather than component:

<ProtectedRoute exact path="/me/update" element={<UpdateProfile />} />