reactjssingle-page-applicationmulti-page-application

Is it reasonable to use React be used for multi-page applications? And how?


My React TodoList project I am thinking of a button takes the user to another page. enter image description here

But If I remember correct, React is best used for single-page application. So it wise to create other separate components that do not interact with the primary rendering file? For example, index.html < index.js < App.js(renders to index.js & AddTodo.html < AddTodo.js < App.js(renders to another page and doesn't interact with index.js)?


Solution

  • Yes, it is. There are several ways you can build multi-page applications using React.

    1. Using Router as @patrick-stephansen correctly suggests in comments. Note that in this case routes only pretend to be pages, but in fact they are not. In reality you always stay on the same page that re-renders dynamically in response to user actions.
    2. Plug-in backend. This way you will be able to properly define routes and serve different pages (with different React-generated views).
    3. Use a static site generator (like, for instance, Gatsby). This way you'll write the site in React, but will end up with simple HTML files in your dist folder that don't require any backend to be present on production.

    What you describe is basically a static site (different HTML files with different JS bundles plugged-in). However doing this without static site generator is extremely tedious, error-prone & hard to maintain.