Declaring routes using an array

Question

I want to move my route declarations for React Router to separate files and then complete the route specification automatically, like this:

// Central array for routes
const routes = [];

// Two routes in separate files
routes.push(<Route path="page1" component="Component1"/>);
routes.push(<Route path="page2" component="Component2"/>);

// Render the routes
<Router history={browserHistory}>
  {routes}
</Router>

Although this works, I'm getting the warning that all children of the iterator, i.e., the routes, should have a key prop: Each child in an array or iterator should have a unique "key" prop. But are keys really necessary in this case? From my understanding, the routes render only once and are not dynamic, even though I'm using an array.

Is it possible to do that in React?

Answer 1

Because you are using an expression (instead of hard-coded/pre-configured children) and because the expression is getting evaluated to an array, React thinks that this is a component with dynamic children and hence it starts warning you with that message.

And thinking more about it, it makes sense. Because as far as React is concerned, there's nothing stopping you from modifying that array and expecting the expression to resolve to a different data set. Therefore it thinks it's a component with dynamic children.