To create a multi-page [[base/Google Apps Script/Google Apps Script|Google Apps Script]] [[web app]], create a `Route` object to store pages and the functions that load them. Update the doGet function to log all possible routes, then check if they exist and fire the function that loads the page. Routes will be provided as parameters in the url.
```JavaScript title="JavaScript.html"
var Route = {}
Route.path = function(route, callback){
Route[route] = callback
}
function doGet(e){
Route.path("form", loadForm);
Route.path("about", loadAbout);
if(Route[e.parameters.v]){
return Route[e.parameters.v]();
} else {
render("index");
}
}
function render(file, kwArgs){
var tmp = HtmlService.createTemplateFromFile(file);
if(kwArgs){
var keys = Object.keys(kwArgs);
keys.forEach(function(key){
tmp[key] = kwArgs[key];
});
} // END IF
}
function loadForm(){
var ss = SpreadsheetApp.openById(id);
var ws = ss.getSheetByName('data');
var list = ws.getDataRegion(ws).getValues();
var htmlListArray = list.map(function(r){ return '<li>' r[0] + '</li>'; }).join('');
return render("form", {list: htmlListArray}); // format {param1: ..., param2: ...}
}
function loadAbout(){
//
return render("about")
}
```
> [!Warning]
> Keep in mind that multi-page apps will not work well if [[deploying to a Google Site]] or [[deploying as an IFrame]]. Due to sandboxing restrictions in browsers, your web app will not be allowed to redirect the top-level browser url, and so while a new page might load, the back button won't work. Users may find multi-page apps deployed in this way frustrating or confusing.