AnimatePresence 和 react-router-dom [BrowserRouter] 不是 <Route> 组件。 <Routes> 的所有组件必须是 <Route> 或 <React.Fragment>

Question

[BrowserRouter] 不是组件。的所有子组件必须是 a 或

我不明白为什么这不再有效。我用这个文件夹结构构建了几个应用程序 - react-router-dom@6.0.3，突然它停止工作了。

Sandbox 与我的文件夹结构。

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;

Answer 1

你AnimatedRoutes.js的第4行有误，应该是

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

您应该使用一个实际的 <Route /> 组件，而不是已经在 App.js

中使用过一次的 BrowserRouter as Route

AnimatePresence 和 react-router-dom [BrowserRouter] 不是 <Route> 组件。 <Routes> 的所有组件必须是 <Route> 或 <React.Fragment>

AnimatePresence and react-router-dom [BrowserRouter] is not a <Route> component. All component of <Routes> must be a <Route> or <React.Fragment>

reactjs

react-router

react-router-dom

framer-motion