Error: [AdminRoute] is not a component. All component children of must be a or

Question

I want authenticated routes if user is not logged in the page should not be accessible like if someone enters in the url localhost.../admin/dashboard he should not be able to navigate instead he should be taken to signin page if not logged in.

I'm using react-router v6 and creating private routes for my application.

AdminRoute.js File Code is below

import React from "react";
import { Route, Navigate} from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

//props component is assigned to Component
//...rest spreading props property but reassigning it to a variable called rest
const AdminRoute = ({ component: Component, ...rest }) => {
    return (
        <Route 
            {...rest}
            render={(props) => 
                isAuthenticated() && isAuthenticated().role === 1 ? (
                    <Component {...props} />
                ) : (
                    <Navigate to = '/signin' /> 
                )
            
            }
        
        
        />
    )
};

export default AdminRoute;

App.js File Code is below

import React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import Signup from './Signup';
import Signin from './Signin';
import ForgotPassword from './forgot-password';
import UserDashboard from './UserDashboard';
import AdminDashboard from './AdminDashboard';
import ShowroomDashboard from './ShowroomDashboard';
import AdminRoute from './AdminRoute';

import NotFound from './NotFound';



const App = () => (<BrowserRouter>
      <Header />
      <main>
            <Routes>
              <Route exact path='/' element={<Home />} />
              <Route exact path='/signup' element={<Signup />} />
              <Route exact path='/signin' element={<Signin />} />
              <Route exact path='/forgotpassword' element={<ForgotPassword />} />
              <Route exact path='/user/dashboard' element={<UserDashboard />} />
              <AdminRoute exact path='/admin/dashboard' element={<AdminDashboard />} />
              <Route exact path='/showroom/dashboard' element={<ShowroomDashboard />} />
              <Route exact path = '*' element={<NotFound />} />
            </Routes>
      </main>
  </BrowserRouter>
  
);

export default App;

score 2 · Accepted Answer · answered Dec 20 '21 at 21:49

react-router-dom no longer supports custom route components, preferring now component wrappers that handle the auth logic and render either the children prop or an Outlet for nested routes, or the redirect.

Wrap a single "Route" component:

import React from "react";
import { Navigate } from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

const AdminRoute = ({ children }) => {
  return isAuthenticated()?.role === 1 
    ? children
    : <Navigate to='/signin' replace />;
};

...

<Route
  path='/admin/dashboard'
  element={(
    <AuthRoute>
      <AdminDashboard />
    </AuthRoute>
  )}
/>

Wrap nested Route components:

import React from "react";
import { Navigate, Outlet } from 'react-router-dom';
import { isAuthenticated } from "../helper/auth";

const AdminWrapper = () => {
  return isAuthenticated()?.role === 1
    ? <Outlet />
    : <Navigate to='/signin' replace />;
};

...

<Route path='/admin/dashboard/*' element={<AdminWrapper />}>
  <Route index element={<AdminDashboard />} />
  ... any other '/admin/dashboard/*' routes ...
</Route>

Error: [AdminRoute] is not a component. All component children of must be a or

1 Answers1