Question

111

Error: [PrivateRoute] is not a < Route> component. All component children of < Routes> must be a < Route> or < React.Fragment>

rated 0 times [ 118] [ 7] / answers: 1 / hits: 185489 / 3 Years ago, sat, november 6, 2021, 12:00:00

I'm using React Router v6 and am creating private routes for my application.

In file PrivateRoute.js, I've the code

import React from 'react';

import {Route,Navigate} from "react-router-dom";

import {isauth}  from 'auth'



function PrivateRoute({ element, path }) {

  const authed = isauth() // isauth() returns true or false based on localStorage

  const ele = authed === true ? element : <Navigate to="/Home"  />;

  return <Route path={path} element={ele} />;

}



export default PrivateRoute

And in file route.js I've written as:

 ...

<PrivateRoute exact path="/" element={<Dashboard/>}/>

<Route exact path="/home" element={<Home/>}/>

I've gone through the same example React-router Auth Example - StackBlitz, file App.tsx

Is there something I'm missing?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zainsagez

Add To Favorites

Follow

Total Points: 555

Total Questions: 99

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

zainsagez questions

1 calling an async function inside for loop in JavaScript / node js

Tue, Jun 29, 21, 00:00, 3 Years ago

1 VM1661:1 Uncaught (in promise) SyntaxError: Unexpected token s in JSON at position 0

Sun, Apr 25, 21, 00:00, 3 Years ago

1 How can I handle net::ERR_INTERNET_DISCONNECTED error in Net Core

Sun, Jan 17, 21, 00:00, 3 Years ago

1 How to double click in Puppeteer

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Get html elements inside shadow root using javascript

Thu, Aug 6, 20, 00:00, 4 Years ago

View All

answered 3 Years ago kalistaz · Accepted Answer

I ran into the same issue today and came up with the following solution based on this very helpful article by Andrew Luca

In PrivateRoute.js:

import React from 'react';

import { Navigate, Outlet } from 'react-router-dom';



const PrivateRoute = () => {

    const auth = null; // determine if authorized, from context or however you're doing it



    // If authorized, return an outlet that will render child elements

    // If not, return element that will navigate to login page

    return auth ? <Outlet /> : <Navigate to="/login" />;

}

In App.js (I've left in some other pages as examples):

import './App.css';

import React, {Fragment} from 'react';

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import Navbar from './components/layout/Navbar';

import Home from './components/pages/Home';

import Register from './components/auth/Register'

import Login from './components/auth/Login';

import PrivateRoute from './components/routing/PrivateRoute';



const App = () => {

  return (

    <Router>

      <Fragment>

        <Navbar/>

        <Routes>

          <Route exact path='/' element={<PrivateRoute/>}>

            <Route exact path='/' element={<Home/>}/>

          </Route>

          <Route exact path='/register' element={<Register/>}/>

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

        </Routes>

      </Fragment>

    </Router>

    

  );

}

In the above routing, this is the private route:

<Route exact path='/' element={<PrivateRoute/>}>

      <Route exact path='/' element={<Home/>}/>

</Route>

If authorization is successful, the element will show. Otherwise, it will navigate to the login page.