As the title asks, is there a recommended method for using:
username.domain.com/event/id/
Where I can ask React to reference both id and username as parameters?
As of now
Currently I can obtain id fine using React router (or any parameter after the domain name in the url).
App.js
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
<Router>
<Routes>
<Route path="/event/:id/"
element={<>
<EventComponent />
</>}
/>
</Routes>
</Router>
EventComponent.jsx
import { useParams } from 'react-router-dom';
let params = useParams();
let eventID = params.id;
// I can now use eventID to reference what was in the url
I can catch server subdomains in my nginx.conf. This is what I use to reach my React app (not a wildcard subdomain yet, but that’s not much of a change and not the problem):
server {
listen 443 ssl;
charset utf-8;
client_max_body_size 10M;
server_name domain.com;
root "/usr/share/nginx/html/domain.com/public_html";
location / {
index index.html;
try_files $uri $uri/ /index.html?/$request_uri;
}
location /sw.js {
add_header Cache-Control "no-cache";
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
expires off;
access_log off;
}
}
Problem
But I don’t know a clean way to pass subdomains to React without rewriting the url in nginx so that the subdomain is becomes part of the url after the domain. This is not a scenario that’s desired.
(the following is an edit added to be more specific about the problem:)
I’m aware of getting the subdomain from window.location.hostname
and splitting it to obtain a string, but I’m seeking clarity on whether this (or another method) is the most desired and won’t have caveats that can be better avoided.
To illustrate my hestitation, I could also just get the id parameter from window.location
, but I don’t, as it appears to be typical to use useParams
in react to do so. I’m always learning and, in doing so, try not to pick up bad habits.
Relevant criteria
As mentioned, I don’t want to rewrite the domain from the above url into something like domain.com/event/id/username/
The structure of the url and presenting it as the original, to the user, is important.
Secondly, the subdomain is a wildcard. It won’t be a fixed string. I can process this fine in nginx but it’s important that a solution allows for a dynamic string.
2
Answers
If
username.domain.com
is the public url, I don’t quite see why you have to pass this to react, surely you can just interrogate the domain name from the browser directly.If not, please add info with an example of the public and local (to nginx) domains and maybe elaborate on some of the reverse proxy rules and I’ll remove the answer / attempt to update.
EventComponent.jsx
Working example of using this method in React:
A subdomain is something only the Webserver should handle.
React router is not able to distinguish between them.
There are multiple ways of achieving the desired outcome, I’ll share my thoughts based on previous experiences.
Note: This assumes all the subdomains should point to the React
index.html
Native + Props
Since all the subdomains will trigger the same React app, we can use the regular Javascript way of retrieving the subdomain, this can be passed to deeper components as a normal
prop
.Query Parameter
(I’ve used this in production to move a header to a query parameter that is removed instantly so the user can’t see it, works great)
You can let Nginx add a query parameter with the subdomain (
../?user=foobar
), this can easily be parsed with Javascript, to ensure the user does not notice this, you can remove the param after the page loads, the user won’t even noticeCookie
The same idea as above, but instead off using query parameters, you can inject the subdomain into a cookie and read it using Javascript