We have to use routing in client-side applications, and, for ReactJS also, we need one or the other routing library, so I recommend that you use react-router-dom instead of react-router.

Advantages:

• Views declaration in standardized structure help us to instantly understand what are our app views
• Using react-router-dom, we can easily handle the nested views and their progressive resolution of views
• Using browsing history feature user can navigate backward/forward and restore the state of view
• Dynamic Route matching
• CSS transitions on views when navigating
• Standardized app structure and behavior, useful when working in a team

Note: React router doesn’t provide any way to handle data-fetching. We need to use async-props or other React data fetching mechanism.

It’s been seen that very few developers who are dealing with webpack know about code splitting of your application code in several files of JavaScript:

require.ensure([], () => { 
  const Profile = require('./Profile.js')
  this.setState({
    currentComponent: Profile
  })
})

This split of code is necessary because each code is not useful to each user, and it’s not necessary to load that chunk of code in each page, which will be a burden for the browser, so to avoid such a situation, we should split our application into several chunks.

Now, you will have a question like if we will have more chunks of code, we will have to have more HTTP requests and that will also affect performance, but with the help of HTTP/2multiplexed, your problem will be resolved. You can also combine your chunked code with chunk hashing, which will also optimize your browser cache ratio whenever you change your code.