user image

Mohamed Atef
Published in : 2022-08-06

React.Fragment. React.Fragment can only have key props and children

React js

Hello everyone I am getting this error in my Reactjs application

React.Fragment. React.Fragment can only have key props and children

My code is 

export const renderRoutes = (routes = []) => ( <Suspense fallback={<LoadingScreen />}> <Switch> {, i) => { const Guard = route.guard || Fragment; const Layout = route.layout || Fragment; const Component = route.component; return ( <Route key={i} path={route.path} exact={route.exact} render={(props) => ( <Guard DeepLink={props.pathname}> <Layout> {route.routes ? renderRoutes(route.routes) : <Component {...props} />} </Layout> </Guard> )} /> ); })} </Switch> </Suspense>);const routes = [ { exact: true, guard: GuestGuard, path: '/404', component: lazy(() => import('src/views/errors/NotFoundView')) },]

How can I solve this issue?


Jo Micheal Date : 2022-08-06

Best answers


Best answers


Fragment cannot have any props the only way to pass to the Fragment is the children (Components). 
If you removed the DeepLink prop it will work fine.

Mohamed Atef Date : 2022-08-06

Thank you, this was the problem.
I have to find another way to pass these data inside the Web Guard

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js