I have a react project and I am working on navbar element of the project. I am currently implementing the react-router-dom in the project. I have the <Route/> nested in the <Routes/>. All of it is contained in the <BrowserRoutes/>. It is rendering the navbar. For the / it is supposed to check and see if loggedIn is true or false and display different components based on if it is true of false.

If it is false, it is supposed to show a login component with the login page. If the user is logged in, it is supposed to show the feed component.

Right now what it is doing is the user is not logged in but it is showing a blank screen and giving me the following error:

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

Here is the code I have:

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>
  );
}