React 路由错误，“[AuthProvider] 不是 <Route> 组件。<Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>”

Question

React 路由似乎过于复杂，我通过 Firebase 进行身份验证，并且需要用 包裹路由，但我收到此错误，它不是组件的一部分。我找不到解决这个问题的方法。路由在 React 中应该如何工作？这是我的 app.tsx:

import Posts, { postsLoader } from "./components/pages/Posts";

const router = createBrowserRouter(
  createRoutesFromElements(
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/posts" element={<Posts />} loader={postsLoader} />
          <Route path="/signin" element={<SignIn />} />
          <Route
            path="/dashboard"
            element={
              <WithPrivateRoute>
                <Dashboard />
              </WithPrivateRoute>
            }
          />
        </Routes>
      </Router>
    </AuthProvider>
  )
);

function App() {
  return <RouterProvider router={router}></RouterProvider>;
}

export default App;

Answer 1

您介意发送错误消息的图片吗？