Skip to content

Use children instead of deprecated component prop for Route content

Yuto Takano requested to merge use-route-children into master

The syntax we use to declare route content (<Route component={HomePage} />) is old and no longer used in more recent versions of React Router. Instead, JSX children or the children prop is used, like <Route><Homepage /></Route>.

To support the transition, React Router v5.1 onwards (which we are on) expose children as a sort of alias prop for component, with the difference that the child must be a rendered element and not just a component type.

So this MR performs a systematic replacement along the lines of:

- <Route component={HomePage} />
+ <Route children={<HomePage />} />

This will make it easier to migrate to v6/7 later.

This change required amendment to the props in LoginPage (to accurately reflect the type of isHome) and to HashLocationHandler (to use React hooks for getting the hash instead of via props).

Merge request reports