0

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;

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Abhishek
  • 21
  • 1
  • 2

1 Answers1

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>
      }
    />
Abhishek
  • 21
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 01 '22 at 13:21