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

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.

Only Route components can be a child of Routes. If you follow the v6 docs then you'll see the authentication pattern is to use a wrapper component to handle the authentication check and redirect.

function RequireAuth({ children }: { children: JSX.Element }) {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    // Redirect them to the /login page, but save the current location they were
    // trying to go to when they were redirected. This allows us to send them
    // along to that page after they login, which is a nicer user experience
    // than dropping them off on the home page.
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
}

...

<Route
  path="/protected"
  element={
    <RequireAuth>
      <ProtectedPage />
    </RequireAuth>
  }
/>

The old v5 pattern of create custom Route components no longer works. An updated v6 pattern using your code/logic could look as follows:

const PrivateRoute = ({ children }) => {
  const authed = isauth() // isauth() returns true or false based on localStorage
  
  return authed ? children : <Navigate to="/Home" />;
}

And to use

<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

Complement to reduce lines of code, make it more readable and beautiful.

This could just be a comment but I don't have enough points, so I'll put it as an answer.

Dallin's answer works but Drew's answer is better! And just to complete Drew's answer on aesthetics, I recommend creating a private component that takes components as props instead of children.

Very basic example of private routes file/component:

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

const Private = (Component) => {
    const auth = false; //your logic

    return auth ? <Component /> : <Navigate to="/login" />
}

Route file example:

<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/user" element={<Private Component={User} />} />
</Routes>

I know that this is not exactly the recipe on how to make PirvateRoute work, but I just wanted to mention that the new documentation recommends a slightly different approach to handle this pattern with react-router v6:

<Route path="/protected" element={<RequireAuth><ProtectedPage /></RequireAuth>} />

import { Navigate, useLocation } from "react-router";

export const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
};

And you are supposed to add more routes inside ProtectedPage itself if you need it.

See the documentation and an example for more details. Also, check this note by Michael Jackson that goes into some implementation details.

Just set your router component to element prop:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

You can also check for upgrading from v5.

React Router v6, some syntactic sugar:

{auth && (
  privateRoutes.map(route =>
    <Route
      path={route.path}
      key={route.path}
      element={auth.isAuthenticated ? <route.component /> : <Navigate to={ROUTE_WELCOME_PAGE} replace />}
    />
  )
)}

I tried all answers, but it always displayed the error:

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

But I found a solution ))) -

In PrivateRoute.js file:

import React from "react"; import { Navigate } from "react-router-dom";
import {isauth}  from 'auth'

const PrivateRoute = ({ children }) => {
  const authed = isauth()

  return authed ? children : <Navigate to={"/Home" /> };

export default ProtectedRoute;

In the route.js file:

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

If you are using a second file to work on your index.js, here is a simpler code snippet that may help others understand better. It is pretty straightforward and you do not require "exact" and "switch" to change between the paths thanks to the new version.

File index.js

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter } from "react-router-dom";

import "./index.css";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

File App.js

Note that you need to import { Routes, Route } instead of { Route } (as it was in previous versions). Also, note that in the App.js file, it is not necessary to import BrowserRouter again.

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

import AllPages from "./pages/AllPages";
import NewContactsPage from "./pages/ContactsPage";
import FavoritesPage from "./pages/Favorites";

function App() {

  return (
    <div>
      <Routes>
        <Route path="/" element={<AllPages />} />
        <Route path="/new-contacts" element={<NewContactsPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

Remove the PrivateRoute component from your project and use the following code in your App.js files:

import {Navigate} from "react-router-dom";
import {isauth}  from 'auth'

...

<Route exact path="/home" element={<Home/>}/>
<Route exact path="/" element={isauth ? <Dashboard/> : <Navigate to="/Home"  />}/>

This is the simple way to create a private route:

import React from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from '../../context/AuthContext'

export default function PrivateRoute({ children }) {
  const { currentUser } = useAuth()

  if (!currentUser) {
    return <Navigate to='/login' />
  }

  return children;
}

Now if we want to add a private route to the Dashboard component we can apply this private route as below:

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

For longer elements

        <Router>
        <div>
            <Navbar totalItems={cart.total_items}/>
            <Routes>
                <Route exact path='/'>
                    <Route exact path='/' element={<Products products={products} onAddToCart={handleAddToCart}/>}/>
                </Route>
                <Route exact path='/cart'>
                    <Route exact path='/cart' element={<Cart cart={cart}/>}/>     
                </Route>
            </Routes>
        </div>
    </Router>

Header will stay on all page

import React from 'react';

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

const Header = () => <h2>Header</h2>
const Dashboard = () => <h2>Dashboard</h2>
const SurveyNew = () => <h2>SurveyNew</h2>
const Landing = () => <h2>Landing</h2>


const App = () =>{
  return (
    <div>
      <BrowserRouter>
        <Header />
        <Routes >
        <Route exact path="/" element={<Landing />} />
        <Route path="/surveys" element={<Dashboard />}  />
        <Route path="/surveys/new" element={<SurveyNew/>}  />
        </Routes>
      </BrowserRouter>
    </div>
  );
};
export default App;

You can use a function for a private route:

<Route exact path="/login" element={NotAuth(Login)} />
<Route exact path="/Register" element={NotAuth(Register)} />

function NotAuth(Component) {
  if (isAuth)
    return <Navigate to="/" />;
  return <Component />;
}

<Route path='/' element={<Navigate to="/search" />} />

I'm using "react-router-dom": "^6.3.0" and this is how I did mine

PrivateRoute Component and Route

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

    const PrivateRoute = ({ component: Compontent, authenticated }) => {
      return authenticated ? <Compontent /> : <Navigate to="/" />;
    }
    
    <Route 
          path="/user/profile" 
          element={<PrivateRoute authenticated={true} component={Profile} />} />

For the error "[Navigate] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>", use the following method maybe solved:

DefaultPage is when no match router. Jump to the DefaultPage. Here use the <Route index element={} /> to replace the

<Navigate to={window.location.pathname + '/kanban'}/>

See Index Routes

<Routes>

      <Route path={'/default'} element={<DefaultPage/>}/>

      <Route path={'/second'}  element={<SecondPage/>}/>

{/* <Navigate to={window.location.pathname + '/kanban'}/> */}
      <Route index element={<DefaultPage/>} />

</Routes>

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

function App() {
  return (
      <Router>
          <Routes>
            <Route path="/" element={<h1>home page</h1>} />
            <Route path="/seacrch" element={<h1>seacrch page</h1>} />
          </Routes>
      </Router>
  );
}

export default App;