How to arrange routing in a React application?

Question

JavaScript

Greetings!
To learn React, I decided to create a small application, but ran into the issue of organizing routing. I found react-router and use it now, but I don't like the idea of ​​defining routes through components and then calling render() to initialize them. I don’t like it just because routing is not a visual component and it’s not very clear why it should be rendered (illogical). Yes, and React is purely a view in MVC, so it seems to me not right to shift responsibility for routing to it.
Actually, the question is how do you organize routing in your React applications and isn't it better to use third-party libraries to work with routes?

Answer 1

Your application consists of two parts:
- these are stupid (dumb) components, in fact, these are almost all of your components. They just render props
- these are the so-called containers (or controller-view pattern), such components are tied to redux (for example) and they have logic.
react-router is the most popular (and in my opinion the best) routing solution. Don't treat it like a twist. It was just most convenient to make the routes as components (but you can also use simple JS objects). And the router itself, by definition, must be rendered, because. it displays the desired component depending on the url.

Answer 2

react-router is a component that renders certain nested components depending on the path passed to it. The fact that it seems illogical to you is not a problem with the react-router.