Wednesday, December 29, 2021

React Router#reactrouter.com

A big update to React Router. Nice to see that they've updated the documentation.

What's interesting to me is that the API is slightly different.

Some interesting points taken from the migration guide:

React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful.

I always used the Switch component anyway so this is a welcome change.

<Route exact> is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply

This is a huge change! I hated having to pass exact to all the Route components. It was also a hard one for students at Coder Academy to get their heads across.

Using elements instead of components means we don't have to provide a passProps style API so you can get the props you need to your elements. For example, in a component-based API there is no good way to pass props to the <Profile> element that is rendered when <Route path=":userId" component={Profile} /> matches.

Nice change. The render syntax was the work around in terms of passing props to a Route but it was ugly and again resulted in some really weird code written by React beginners.

The changes also mean lots of work at 99designs if we're ever to update to the latest version.