Tengo un proyecto de reacción y estoy trabajando en el elemento de la barra de navegación del proyecto. Actualmente estoy implementando el react-router-dom en el proyecto. Tengo <Route/> anidado en <Routes/> . Todo está contenido en <BrowserRoutes/> . Está renderizando la barra de navegación. Para el / se supone que debe verificar y ver si el inicio de sesión es verdadero o falso y mostrar diferentes componentes en función de si es verdadero o falso.

Si es falso, se supone que debe mostrar un componente de inicio de sesión con la página de inicio de sesión. Si el usuario ha iniciado sesión, se supone que debe mostrar el componente de alimentación.

Ahora mismo lo que está haciendo es que el usuario no está logueado pero me muestra una pantalla en blanco y me da el siguiente error:

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

Aquí está el código que tengo:

 import React, {useState} from 'react'; import Login from './Login'; import Signup from './Signup' import LandingPage from './LandingPage' import Feed from './Feed' import axios from 'axios'; import { Routes, Route } from 'react-router-dom'; axios.defaults.baseURL = 'http://127.0.0.1:3333'; axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN'; axios.defaults.headers.post['Content-Type'] = 'application/json'; export const ContentContext = React.createContext() export default function App() { const [loggedIn, setLoggedIn] = useState(false) return ( <div className="App"> <ContentContext.Provider value={ContentContextValue}> <Routes> <Route exact path="/"> {loggedIn ? <Feed /> : <LandingPage />} </Route> <Route exact path="/login" element={<Login/>}/> <Route exact path="/signup" element={<Signup/>}/> </Routes> </ContentContext.Provider> </div> ); }