0

I am trying to make a private route and I get the following error: caught Error: [PrivateRoute] is not a component. All component children of must be a or <React.Fragment>

The first two code blocks are two DIFFERENT attempts at trying to solve the problem with the PrivateRoute. None of which worked. I found some other solutions to the problem here on SO, but they are outdated. Any suggestions?

const PrivateRoute = ({ children, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  return currentUser ? children : <Navigate to="/login" />;
};
const PrivateRoute = ({ children, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  // return currentUser ? children : <Navigate to="/login" />;
  return (
    <Route
      {...rest}
      render={({ location }) =>
        currentUser ? (
          children
        ) : (
          <Navigate
            to={{
              pathname: "/login",
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};
        <Routes>
          <PrivateRoute>
            <Route
              path="form"
              element={
                <Form
                  deletePdfFromPreview={deletePdfFromPreview}
                  handleFile={handleFile}
                  createBookletDb={createBookletDb}
                />
              }
            />
            <Route index element={<Navigate to="booklets" replace />} />
            <Route
              exact
              path="booklets"
              element={
                <Booklets
                  allPdfFiles={allPdfFiles}
                  booklets={booklets}
                  currentPdfFiles={currentPdfFiles}
                  editBooklet={editBooklet}
                  deleteBooklet={deleteBooklet}
                />
              }
            />
          </PrivateRoute>
          <Route
            path="/login"
            element={
              <Login
                passwordError={passwordError}
                register={register}
                logout={logout}
                login={login}
              />
            }
          />
          <Route
            path="/register"
            element={
              <Register passwordError={passwordError} register={register} />
            }
          ></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/booklet/:id" element={<Booklet />}></Route>
        </Routes>

0 Answers0