2

Error Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

Private Router

function PrivateRoute({ children, ...rest }) {
  const auth = useAuth();
  return (
    <Route
      {...rest}
      render={() => {
        if(auth.user){
          return children;
        }
        return <Navigate to='/login' />
      }}
    />
  );
}

App.js

return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<Home />} />

          <Route exact path="/login" element={<Login />} />

          <Route exact path="/register" element={<Signup />} />

          <Route exact path="/settings" element={<PrivateRoute><Settings /></PrivateRoute>} />

          <Route element={<Page404 />} />
        </Routes>
      </Router>
    </div>
  );

I was trying to Privating the route for settings , but got error.

Piyush Bhatnagar
  • 21
  • 2

1 Answers1

1

Can you try to replace your settings route by this :

<Route exact path="/settings" component={PrivateRoute}><Settings /></Route>
Johan
  • 2,088
  • 2
  • 9
  • 37