React Redux Pages With React Router

Question

Currently I am looking in to making an application with React and Redux. Now in most examples they use React Router, and I was wondering what this is exactly for.

My application is going to have many pages (at least 20) with dynamic content. Now my question is, could this be made with React Router? I see some things that say it helps you make one page applications, but what is a one page application? So basically, would it be best to go with React Router, or another library? Also, even if it is a multi-page application, would I still only have one index.js and one index.html ?

Answer 1

what is a one page application?

A single page application has all the necessary code retrieved with a single page load. An example of a SPA is gmail. SPA's don't need to refresh the browser when navigating between views.

would it be best to go with React Router, or another library?

React Router is not the official routing library from Facebook but it is by far the most popular. I recommend using it since it has a large community behind it that can help you if you run into any issues.

would I still only have one index.js and one index.html?

With React you will need something like Webpack to transpile JSX and ES6. The entry point for your app will be a bundled js file created by Webpack that contains all your javascript code. You could have multiple entry points, for instance if you wanted to have a separate bundle for your node modules. So in short, you will have one index.html file but you could have one or multiple js files.

Answer 2

React router allows you to set "Routes" such as:

/
/posts
/posts/12345
/posts/archive

Without react-router , you will have to manage the changes to the URL yourself.

Additionally, for larger, more complex apps, react-router (along with Webpack) will allow you to do 'code splitting', allowing you to serve only the required files for each URL. Without this, your single bundle.js file can become very large.