1

I want to make a protected route for the admin dashboard. Sign-in and Sign-up routes are public. Before creating a protected route every route was working well. I created a component to create a private route. I replaced the route as a Private route and the page loads and terminal gives no error. But the page renders nothing and the console throws an error as the private route is not a route component. All children of routes must be a route or react. fragment.

Privet Route Component

import React from 'react'
import {Route} from 'react-router-dom'
const PrivateRoute = (props) => {
    return <Route {...props} />
}

export default PrivateRoute

App.js

import './App.css';
import {BrowserRouter , Routes ,Route} from 'react-router-dom'
import Home from './container/Home/Home'
import Signin from './container/Signin/Signin'
import Signup from './container/Signup/Signup'
import PrivateRoute from './components/HOC/privateRoute'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <PrivateRoute path='/' exact element={<Home/>}/>
          <Route path='/signin' element={<Signin/>}/>
          <Route path='/signup' element={<Signup/>}/>
          <Route/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
Yassin Mo
  • 347
  • 2
  • 9
  • Related, assuming Router6: https://stackoverflow.com/questions/69923420/how-to-use-private-route-in-react-router-domv6 – isherwood Jan 21 '22 at 13:56
  • index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . @isherwood – Yassin Mo Jan 21 '22 at 14:51
  • that link in the first comment above has the answer to your question. In v6 you can't use `PrivateRoute` the way you are attempting to do, you need a wrapper. Just read the answers to the link above – Sangeet Agarwal Jan 21 '22 at 15:25

0 Answers0