How to use Protected/Private Route in React Router v6 [duplicate] - reactjs

Question

This question already has answers here:
How to create a protected route with react-router-dom?
(5 answers)
Closed 12 months ago.
I am using react router v6 and creating a private/protected route. Once the user is authenticated and when i refresh the page it shows the following error in console.
[ProtectedRoute] is not a component. All component children of must be a or <React.Fragment>
This is my ProtectedRoute.js file
import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Navigate, Route } from "react-router-dom";
const ProtectedRoute = ({ element: Element, ...rest }) => {
const { loading, isAuthenticated, user } = useSelector((state) => state.user);
return (
<Fragment>
{!loading && (
<Route
{...rest}
render={(props) => {
if (!isAuthenticated) {
return <Navigate to="/login" />;
}
return <Element {...props} />;
}}
/>
)}
</Fragment>
);
};
export default ProtectedRoute;
And this is my App.js
import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import WebFont from "webfontloader";
import Header from "./component/layout/Header/Header";
import Footer from "./component/layout/Footer/Footer";
import Home from "./component/Home/Home.js";
import ProductDetails from "./component/Product/ProductDetails.js";
import Products from "./component/Product/Products.js";
import LoginSignUp from "./component/user/LoginSignUp";
import Profile from "./component/user/Profile.js";
import store from "./store";
import { loadUser } from "./actions/userAction";
import UserOptions from "./component/layout/Header/UserOptions.js";
import { useSelector } from "react-redux";
import ProtectedRoute from "./component/Route/ProtectedRoute";
function App() {
const { isAuthenticated, user } = useSelector((state) => state.user);
React.useEffect(() => {
WebFont.load({
google: {
families: ["Roboto", "Droid Sans", "Chilanka"],
},
});
store.dispatch(loadUser());
}, []);
return (
<Router>
<Header />
{isAuthenticated && <UserOptions user={user} />}
<Routes>
<ProtectedRoute path="/account" element={<Profile />} />
<Route path="/login" element={<LoginSignUp />} />
<Route path="/products/:keyword" element={<Products />} />
<Route path="/products" element={<Products />} />
<Route path="/product/:id" element={<ProductDetails />} />
<Route path="/" element={<Home />} />
</Routes>
<Footer />
</Router>
);
}
export default App;

Answer 1

In Protected.js
import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
const ProtectedRoute = ({ children }) => {
const { loading, isAuthenticated } = useSelector((state) => state.user);
if (loading) return null;
return isAuthenticated ? children : <Navigate to="/login" replace />;
};
export default ProtectedRoute;
In App.js
<Route
path="/account"
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
/>