Progressive Web Apps with React

The React Router difference

For some React routing solutions, the model will look something like the following.

We will render our initial screen, as shown:

<App>  <LoginContainer /></App>

This will fit with the URL of chatastrophe.com/login. When the user completes the login, we will send them to chatastrophe.com/chat. At that point, we will call ReactDOM.render with the following:

<App>  <ChatContainer /></App>

React's reconciliation engine will then compare the old app with the new app and swap out the components that have changes; in this case, it will swap LoginContainer for ChatContainer, without rerendering App.

Here's a very simple example of what that may look like, using a basic routing solution called page.js:

page(‘/’, () => {