You are still wrong. This portion of the UI in this case doesn't care about the routing mechanism itself, but it does care about the history, which page is the current, and it also wants to trigger route navigations. This is a navigational component after all!
If your app needs to show, say, a menu bar, you need those things. Maybe some apps don't, but most of them do.
How would you implement this communication in your ideal system?
Let's see:
This component lives around two or three levels down from the entry point of your React tree (the part which communicates with the router). Which way is simplest way to connect this to the router indirectly? One way is by passing values and callbacks via props, from layer to layer, until it reaches the menubar. This works and is completely isolated, you basically have plain-simple-Javascript-objects "injected" from the top level, or instances of an interface, if you're doing Typescript! This follows the I of SOLID: Interface Segregation Principle. It also provides you with the S, Separation of Concerns.
But the "prop-drilling" is way too cumbersome. Let's maybe use the Context API, which is a way of replacing prop-drilling? It's still properly isolated.
Congratulations, you just re-invented the wheel and re-implemented exactly what withRouter does.
Sure you could have your own homegrown interfaces. Or maybe you could have no menu at all in your app! It's your choice. But it doesn't matter: this is still following the rules you are calling for.
If your app needs to show, say, a menu bar, you need those things. Maybe some apps don't, but most of them do.
How would you implement this communication in your ideal system?
Let's see:
This component lives around two or three levels down from the entry point of your React tree (the part which communicates with the router). Which way is simplest way to connect this to the router indirectly? One way is by passing values and callbacks via props, from layer to layer, until it reaches the menubar. This works and is completely isolated, you basically have plain-simple-Javascript-objects "injected" from the top level, or instances of an interface, if you're doing Typescript! This follows the I of SOLID: Interface Segregation Principle. It also provides you with the S, Separation of Concerns.
But the "prop-drilling" is way too cumbersome. Let's maybe use the Context API, which is a way of replacing prop-drilling? It's still properly isolated.
Congratulations, you just re-invented the wheel and re-implemented exactly what withRouter does.
Sure you could have your own homegrown interfaces. Or maybe you could have no menu at all in your app! It's your choice. But it doesn't matter: this is still following the rules you are calling for.