What is the correct approach when creating a multi-page react application?

Question

React

Good day, developers!
There was a need to learn react.js. Before that, I was confidently using only jQuery. Now I started to delve into the material on the react. But some things I don't fully understand. I have to lay out the catalog exactly on react.js, it will be a multi-page site. What is the correct way to implement such a multi-page application?
1. Is it done so that only the directory itself will be a react application, and the header and footer, all sorts of windows are the usual layout? Or is this not the right approach?
2. It is logical to assume that if react is used, then connecting other libraries, for example, jQuery (for carousels, windows, ajax) will be fundamentally wrong?
3. How is a multi-page application organized? Will these be just different pages that will call the necessary components (catalog, subcategory, detailed page) or is there another logic here?
4. Purely curious: if there is only one #app block on the page, for example, and everything else is loaded via js, how are things going with SEO?
I would like to deal with these issues in order to continue to study react, understanding the whole picture.

Answer 1

1. In your case, no, as far as I understand, you need navigation without reloading the page.
2. Forget at the time of development what JQuery is and the approaches that it is customary to use with it. In terms of libraries, the react ecosystem contains a lot of libraries. It also made sense to connect the library for ajax requests axios/superagent/etc. In general, before including any library, it is better to think 3 times, since many of them significantly increase the size of the bundle, for example, the same moment. In order to be aware of what and how much space in your bundle takes up space, you can connect the webpack-bundle-analyzer assembly to prod.
3. Read about client-side routing. For React development, the react-router standard.
4. SSR.

Answer 2

1. If the header and footer do not have buttons or other elements that change the state of the components, then you can use the usual layout, and put a block inside in which the main component of the application will work
2. Yes, it is.
3. Read about the React Router, in short: pages are placed inside the Switch component and each prop has a path in which it will be displayed. And there are Link components that change the location of the component.
4. There are a lot of materials on the Internet on how to make React Router friends with SEO