React router dom resetting path for any path with a trailing "/" I think?

Question

I have a react app with a node/express backend that redirects users from https://example.com to https://www.example.com. This all works well, however I'm having an issue with just two routes. My app routing structure is below. However, for two routes /s/:id and /articles/*, my app is serving the homepage unless I provide www in the subdomain.

For example: https://mywebsite.com/s/testId is redirecting to https://www.mywebsite.com/ when it should redirect to https://www.mywebsite.com/s/testId. Same thing with the articles route. Just to be clear, it is working when the redirect doesnt happen, e.g: navigating to https://www.mywebsite.com/s/testId correctly resolves to https://mywebsite.com/s/testId

All other routes work totally fine. At first I thought this was a DNS issue so I've been playing around with that all day but after testing all of the routes, I think its a react router issue. Is there something I'm missing that I can configure with react-router-dom that will resolve this?

 <Routes>
                <Route
                  path="/"
                  element={
                    <MainContainer />
                  }
                ></Route>
                <Route
                  path="/s/:id"
                  element={
                    <ShareContainer />
                  }
                ></Route>
                <Route
                  path="/articles/*"
                  element={<ArticleRouter />}
                ></Route>
                <Route
                  path="/releaseNotes"
                  element={
                    <ReleaseNotesContainer />
                  }
                />
                <Route path="/privacy" element={<PrivacyContainer />}></Route>
                <Route
                  path="/contact"
                  element={
                    <ContactContainer />
                  }
                ></Route>
                <Route
                  path="/terms"
                  element={<TermsOfServiceContainer />}
                ></Route>
              </Routes>

And my entire server routing logic is here:

const app = express();

app.use(express.static(path.resolve(__dirname, "../client/build")));

app.use(cors());

app.use("/api/packs", packRoutes);

app.use("/api/items", itemRoutes);

app.use("/api/contact", contactRoutes);

app.use("/api/logging", loggingRoutes);

app.get("/api", (req, res) => {
  res.status(200).json([]);
});

app.use("/auth", authRoutes);

app.get("/sitemap.xml", function (req, res) {
  res.sendFile(path.join(__dirname, "public", "sitemap.xml"));
});

app.get("/robots.txt", function (req, res) {
  res.sendFile(path.join(__dirname, "public", "robots.txt"));
});

// Anything that doesn't match the above, send back index.html
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build", "index.html"));
});

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Answer 1

Found the answer here, not a react nor express issue at all:

https://webmasters.stackexchange.com/questions/112771/redirecting-with-namecheap-removes-the-path-and-sends-all-urls-to-the-home-page

It is important to note that the value in the Destination URL affects where and how the URL is redirected.

Host: www1.example.net Destination: http://example.com

Host: www2.example.net Destination: http://example.com/

In the first case, www1.example.net will not pass values to the destination URL, so www1.example.com/xyz.html will redirect users to http://example.com only. Thus, all values that you put in the original URL under your domain name will be left out.

In the second case, www2.example.net/xyz.html will redirect users to http://example.com/xyz.html (pay attention to the symbol "/" in the configuration). All values that are put into the original URL under the domain name will be included in the destination address and applied in the results.