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> {routes.map((route, 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?

Comments

Jo Micheal Date : 2022-08-06

Best answers

6

Best answers

6

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