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

I don't understand why this isn't working anymore. I've built a couple of apps with this folder structure - [email protected], and suddenly this stopped working.

Sandbox with my folder structure.

App.js

import './App.scss';
import {BrowserRouter as Router} from 'react-router-dom'
import AnimatedRoutes from './Routes/AnimatedRoutes'
import Navbar from './Layouts/Navbar/Navbar'

function App() {
  return (
    <>
    <Navbar />
    <Router>
      <AnimatedRoutes />
    </Router>
    </>
  );
}

export default App;

AnimatedRoutes.js

import React from 'react'
import Homepage from '../Pages/Homepage/Homepage'
import ProjectPage from '../Pages/ProjectPage/ProjectPage'
import {BrowserRouter as Route, Routes, useLocation} from 'react-router-dom'
import { AnimatePresence } from 'framer-motion'

function AnimatedRoutes() {

  const location = useLocation();

  return (
    <AnimatePresence exitBeforeEnter
      onExitComplete={() => {
        if (typeof window !== 'undefined') {
          window.scrollTo({ top: 0 })
        }
      }}>
      <Routes location={location} key={location.pathname}>
        <Route path='/' element={<Homepage />} />
        <Route path='/:id' element={<ProjectPage />} />
      </Routes>
    </AnimatePresence>
  );
}

export default AnimatedRoutes;

HomePage.js

import React from 'react'

function Homepage() {

  return (
    <div className='homepage'>
      Homepage
    </div>
  );
}

export default Homepage;

CodePudding user response：

You have a mistake in line 4 of AnimatedRoutes.js, it should be

import { Route, Routes, useLocation} from 'react-router-dom'

There is an actual <Route /> component that you should use, instead of BrowserRouter as Route that's already used once in App.js