使用路由反应包装器

Question

已将我的路线与路线包装在一起，但它一直向我显示错误，它需要包装在路线中

这是我的控制台中的确切错误
react-router-dom.js?v=74614133:209 未捕获错误： 只能用作 元素的子元素，从不直接渲染。请将您的 包裹在

中

下面是我的实际代码

 <Routes>
          <Route
            path={ROUTES.LOGIN}
            element={
              <IsUserLoggedIn user={user} loggedInPath={ROUTES.DASHBOARD} navigate={Navigate}>
                <Route index element={<Login />} />
              </IsUserLoggedIn>
            }
          />
          <Route
            path={ROUTES.SIGN_UP}
            element={
              <IsUserLoggedIn user={user} loggedInPath={ROUTES.DASHBOARD} navigate={Navigate}>
                <Route index element={<Signup />} />
              </IsUserLoggedIn>
            }
          />
          <Route path={ROUTES.PROFILE} element={<Profile />} />
          <Route
            path={ROUTES.DASHBOARD}
            element={
              <ProtectedRoute user={user} navigate={Navigate}>
                <Route index element={<Dashboard />} />
              </ProtectedRoute>
            }
          />
          <Route path="/" element={<NotFound />} />
        </Routes>
      </Suspense>
    </Router>
here was what i tried and it is supposed to run

Answer 1

您的问题与

Route

中的嵌套

Route

组件有关：

<Route index element={<Login />} /> <-- this one should be also a direct child of a `Routes` Component.

我不太确定你想要做什么，但我会建议一些不同的东西：

  <Route
    path={ROUTES.LOGIN}
    element={
      <IsUserLoggedIn user={user} loggedInPath={ROUTES.DASHBOARD} navigate={Navigate}>
        <Login />
      </IsUserLoggedIn>
    }
  />

你觉得这对你有意义吗？