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

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

Module not found: Can't resolve 'swiper' in Reactjs [Solved]
Publish date: 2021-10-03 | Comments: 1

Tag: React js

React Component setState doesn't update my property
Publish date: 2022-03-29 | Comments: 2

Tag: React js