react-router v6 <Route />组件不允许我将<Navigate />渲染为元素

Question

我正在尝试为我的应用程序创建受保护的路由，但是 Route 组件似乎不接受 作为元素。我正在努力：

import {
  BrowserRouter as Router,
  Navigate,
  Route,
  Routes,
} from 'react-router-dom';

...

<Router>
  <Routes>
    <Route
      path={DASHBOARD_PATH}
      element={
        <ProtectedRoute auth={customer?.isApproved}>
          <ScreensHome />
        </ProtectedRoute>
      }
   />
  </Routes>
</Router>

其中 实现如下所示：

  const ProtectedRoute: React.FC<Props> = ({ children, auth }) => {
    if (!auth) {
      return <Navigate to={NOT_APPROVED_PATH} replace />;
    }

    return children;
  };

但收到： [Navigate] 不是组件。的所有子组件必须是 或 错误 我的依赖文件如下所示：

  "dependencies": {
    "@azure/msal-browser": "^3.7.1",
    "@azure/msal-react": "^2.0.10",
    "@azure/storage-blob": "^12.17.0",
    "@date-io/date-fns": "^3.0.0",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.6",
    "@mui/styles": "^5.15.6",
    "@mui/x-data-grid": "^6.19.1",
    "@mui/x-date-pickers": "^6.19.0",
    "@tanstack/react-query": "^5.17.19",
    "@types/jest": "^29.5.11",
    "@types/node": "^20.11.6",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-phone-number-input": "^3.0.17",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.6.6",
    "date-fns": "^2.30.0",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "env-cmd": "^10.1.0",
    "immutable": "^5.0.0-beta.4",
    "moment": "^2.30.1",
    "powerbi-client": "^2.22.3",
    "powerbi-client-react": "^1.4.0",
    "query-string": "^8.1.0",
    "react": "^18.2.0",
    "react-beforeunload": "^2.6.0",
    "react-calendly": "^4.3.0",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-gtm-module": "^2.0.11",
    "react-moment": "^1.1.3",
    "react-phone-number-input": "^3.3.9",
    "react-router-dom": "^6.21.3",
    "react-scripts": "^5.0.1",
    "typescript": "^5.3.3",
    "web-vitals": "^3.5.1"
  },

我错过了什么？

尝试使用react-router-dom版本，以不同的方式实现，但似乎没有任何帮助

Answer 1

没关系，我可能工作过度了，没有注意到文件底部组件内的标签。谢谢！

Answer 2

在 Routes 中，所有子项都必须是 Route ，对于受保护的路线，您可以执行此操作（也使用 Outlet 而不是 children）：

import {
  BrowserRouter as Router,
  Navigate,
  Route,
  Routes,
  useNavigate,
} from "react-router-dom";

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/sign-up" element={<SignUp />} />
      <Route path="/sign-in" element={<SignIn />} />
      <Route element={<ProtectedRoute />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<UserProfile />} />
        {/* Handle other routes */}
      </Route>
    </Routes>
  );
};

export const ProtectedRoute = () => {
  const navigate = useNavigate();
  //...
  if (!customer?.isApproved) {
    navigate(NOT_APPROVED_PATH);
  }
  return (
    <Grid container direction="column" width="100%" flexWrap="nowrap">
      <DashboardHeader />
      <Grid container direction="row" flexWrap="nowrap">
        <Grid item>
          <SideBar />
        </Grid>
        <Outlet />
      </Grid>
    </Grid>
  );
};