The root component of the application is now the Router and since now routing and rendering are done together, I had to change the html template, index.html, of the application from

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Library application</title>

<link rel="stylesheet"type="text/css"href="/css/library.css"/>

</head>

<body>

<div class="page-header">

<header id="header-div"class="header"></header>

</div>

<div class="page-content">

<div id="content-div"class="content"></div>

</div>

</body>

</html>

to

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Library application</title>

<link rel="stylesheet"type="text/css"href="/css/library.css"/>

</head>

<body>

<div id="app-div"></div>

</body>

</html>

and the application’s entry point, Library.js to

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

importReact from'react';

import{render}from'react-dom';

importLibraryRouter from'routers/LibraryRouter';

jQuery.i18n.properties({

name:'Messages',

path:'/js/bundle/',

mode:'map',

checkAvailableLanguages:true,

async:true,

callback:function(){

render(<LibraryRouter/>,document.getElementById('app-div'));

}

});

HeaderComponent should be displayed in all situations so it doesn’t need a Route component. Switch is not really needed in my case but without it the Redirect displayed the following warning in the console