Error with keys on the routes navigation

Hi guys,

We need to fix some errors on the routes file.

The app need keys for every route we’ll create on our routes file. Well right now we don’t have it on this file but in the main page (Home page or Dashboard page) it send 3 errors about keys (image above).

We don’t put any key on the routes.tsx file but we have on the main page (image above).

And the error still on the console…You know how to fix this error with the keys ??

Thanks !!!

I find a solution, maybe it’s not the best, but the warnings and errors disappear.

We export an “Interface’s” on the main routes page (“routes.tsx”) when we create the Navigation and the SubNav, on this interface make a new prop called “key”, with “no required” (" key?: ‘example-key’ ").

Then we put the name of the nav and subnav (an example, for one item of the Nav called Applications:
key: ‘applications-nav-menu’.

We know this is only 'cause we don’t have a dynamic routes and use only static and any change on the future.

If someone have a better idea…please tell us!!

Thanks!!

Hey Sergio,

I’m glad you found a solution! It is a fine solution to use the names of the routes as keys, like you said, as long as they are unique. An alternative is to use the index like key={idx} which shouldn’t ever give you a problem.

Thanks!

  • Zack
1 Like

Thanks @redallen, I think your solutions it’s better, maybe we try it and clean some code