Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-router v6 <Route /> component doesn't let me render <Navigate /> as an element

I’m trying to make protected routes for my app, but Route component seems to not accept as an element. I’m trying to:

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>

where implementation looks like:

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

    return children;
  };

but receive: [Navigate] is not a component. All component children of must be a or <React.Fragment> error
My dependencies file looks like that:

  "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"
  },

what am I missing?

tried playing around with react-router-dom versions, implementing in different ways but nothing seems to have helped

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    nevermind, I've probably overworked too much and didn't notice tag right inside my component at the bottom of the file. Thanks!


  2. 0

    in Routes all children must be an Route , for protected route you can do this (also use Outlet instead of 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>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search