Why does the migration guide say to make your components children?

[cdeutsch]

I followed the migration guide and it says to stop using component in <Route path="/about" component={About} /> and make it a child instead:

<Route path="/about">
  <About />
</Route>

Spent half a day doing that, a day doing the rest of the upgrade to v6, only to find out Route wants the component to be set as the element instead <Route path="/about" element={About} />

Ahhhh....WHY did I spend half a day making the component a child???

Might way to delete that section from your docs. 😠

[mjackson]

The point of that step was to go from a component prop which references a function or class that is used to create React elements to making the actual elements themselves. The upgrade guide you referenced notes that you can continue to use the named children prop so you don't have to nest the elements if you don't want to.

This step should be doable using find/replace on your codebase. Just find all instances of <Route component={About}> and replace them with <Route children={<About />}>.

[cdeutsch]

The upgrade guide you referenced notes that you can continue to use the named children prop so you don't have to nest the elements if you don't want to.

Agreed, and in retrospect I should have renamed component to children, and it does mention that but that's NOT what the example shows. Based on my first hand experience this guide was confusing at best, and in practice wasted a lot of my time.

The example shouldn't be telling people to do...

<Route path="/about">
  <About />
</Route>

...because when you actually upgrade to v6 you're going to have to undo it.