What to do with react-router?

Many times I have problem with <Link ... /> and <Route ... /> maybe with something like:

<Route
  path={`${match.url}/:player_id`}
  children={props => (
    <PlayerDetail {...props} teamId={match.params.team_id} />
  )}
/>

Route
whyDidYouRender.min.js:1185 {Route: ƒ} "Re-rendered because of props changes:"
whyDidYouRender.min.js:1190 props.children
whyDidYouRender.min.js:1190 different functions with the same name.
whyDidYouRender.min.js:1190 {prev children: ƒ} "!==" {next children: ƒ}

Can we make a Wiki page (or you have already planned a future article) just for react-router?

[jmoyers]

It seems a lot of very commonly used packages aren’t built with memoization in mind. I guess it’s fine, premature optimization and all that. Same is true for many things that say they play nicely with hooks, but then return a new function on every call (e.g. react-apollo-hooks).

That being said, what I did with react-router was to, yes, acknowledge that the components behave like that, and 2. use the global exclude feature to reduce noise.

whyDidYouRender(React, {
  include: [/.*/],
  exclude: [/^Link/, /^Route/, /^BrowserRouter/]
});

[vzaidman]

Thats one way to go, but I still think this is not the right way to go. I think we should not usually care about why components render unless they are huge components that are bottlenecks and important to performance