Extra objects added to URL pattern when navigating search pages

[iannesbitt]

Describe the bug
When navigating the catalog pages on https://arcticdata.io/catalog, clicking on a page seems to add another /catalog to the path. Similarly, when using the sandbox instance at https://mn-sandbox-ucsb-1.test.dataone.org/metacatui, /metacatui is added to the path every time the user navigates to a new page. This happens both when clicking on the arrows and when clicking on the page number.

To Reproduce
Steps to reproduce the behavior:

1. Go to arcticdata.io search or the sandbox instance
2. Click on page 2 or the right page nav arrow
3. Check the URL
4. See error

Expected behavior
The URL page number should change or increment, but the rest of the URL should remain the same as it was prior to navigation.

Screenshots
arcticdata.io:

sandbox:

Desktop (please complete the following information):

• OS: all
• Browser: any
• Version: all

Smartphone (please complete the following information):

• Device: all
• OS: all
• Browser: any
• Version: all

Additional context
This does not happen on https://search.dataone.org, https://drp.dataone.org/data, or https://knb.ecoinformatics.org/data

[iannesbitt]

Interesting that this also does not happen on https://metacatui.test.dataone.org/data

[robyngit]

One challenge with reproducing this issue is that our production site uses Apache, while we are using Express in development. To mimick the ADC's behaviour of serving MetacatUI from "/catalog" in production, we can configure Express to serve the app from the same base URL. This involves setting up the Express server to recognize and handle requests prefixed with /catalog and to add a special route for config/config.js to be served from catalog/config/config.js. Here is a Express server setup that does this:

Express server setup (click to expand)

const express = require("express");
const path = require("path");
const port = process.env.PORT || 3000;
const app = express();

// Subdirectory where index.html and the rest are
const srcDir = "src";
// Absolute path to the src directory
const srcPath = path.resolve(__dirname, srcDir);
// Absolute path to index file
const indexPath = path.resolve(__dirname, srcDir, "index.html");
// Absoloute path to config file
const configPath = path.resolve(__dirname, srcDir, "config", "config.js");

// Serve static files from /catalog
app.use("/catalog", express.static(srcPath));

// Special route for config/config.js to fetch from catalog/config/config.js
app.get("/config/config.js", function (request, response) {
  response.sendFile(configPath);
});

app.get("/catalog/*", function (request, response) {
  console.log("Request for catalog: " + request.url);
  response.sendFile(indexPath);
});

app.listen(port);
console.log("Now running at http://localhost:" + port + "/catalog");