“react-router-dom”中的私有路由：“6.0.0-beta.0”

Question

Please help me

When the Route is not inside <Routes> it gives an error: Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a

When it is inside <Routes> it give an error as: Error: [Abc] is not a <Route> component. All component children of must be a <Route> or <React.Fragment>

Pls help me to resolve this situation? Or any suggestion.

Tried this but one of the above error in both cases.

As this does not generate an error, however my child component of the private route does not render.

import React from 'react'
import './App.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Header from './components/Header'
import Home from './components/Home'
import Login from './components/Login'
import ProtectedRoute from './components/Helper/ProtectedRoute';
import { UserStorage } from './UserContext';
import User from './components/User';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <UserStorage>
          <>
            <Header />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="login/*" element={<Login />} />
              <Route path='/conta' element={<ProtectedRoute/>}>
                <Route path='/conta' element={<User/>}/>
              </Route>
            </Routes>
          </>
        </UserStorage>
      </BrowserRouter>
    </div>
  )
}

export default App;

ProtectedRoute

import React from 'react';
import { UserContext } from '../../UserContext';
import {Routes, Route,  Navigate } from 'react-router-dom';

const ProtectedRoute = (props) => {
  const { login } = React.useContext(UserContext);

  if (login === true) return (
    <Routes>
      <Route {...props} />
    </Routes>
  );
  else if (login === false) return <Navigate to="/login" />;
  else return null;
};

export default ProtectedRoute;

Answer 1

With layout wrapper components like ProtectedRoute that renders nested Route components then you need to ensure it is rendering an Outlet for them to be rendered into.

Outlet

import React from 'react';
import { UserContext } from '../../UserContext';
import {Routes, Route,  Navigate } from 'react-router-dom';

const ProtectedRoute = () => {
  const { login } = React.useContext(UserContext);

  if (login === undefined) return null;

  return login
    ? <Outlet /> // <-- nested Route components rendered here
    : <Navigate to="/login" replace />;
};

...

<Route path='/conta' element={<ProtectedRoute/>}>
  <Route path='/conta' element={<User/>}/> // <-- rendered into outlet
</Route>