how to add query parameters on react start up without react-router?

user_6593522 0
Viewed 178

I am not sure whether this question may sound strange but I am wondering whether there is a way I can add query params to the URL when my React app starts without React-Router.

Here is a bit of context. I have a sort of micro front-end apps. I am using Iframes for individual apps and the wrapper app passes a few query strings in the Iframe URL when we click on a menu in the wrapper app. The wrapper app uses React-Router but none of the child apps use it. For development now I have to start individual applets and add the query params manually in the URL. To save some time I am trying to hardcode a few params for the development environment while React starts.

Like we can set up the PORT, is there any way in the npm start command to handle this?

My current start command "start": "set PORT=41100 && env-cmd -f .env.dev react-scripts start",

What I tried I tried using the BROWSER and BROWSER_ARGS in the command but had no success. Not sure whether this is how it is used.

"start": "set PORT=41100 && set BROWSER=Chrome && set BROWSER_ARGS=\"param=val\" && env-cmd -f .env.dev react-scripts start",

A working option is to add a bit of script in the index.jsx,

if (process.env.NODE_ENV === "development" && !window.location.search) window.location.search = "abc=xyz";

If anyone knows how to handle it in the NPM scripts somehow, please let me know.

reactjs javascript
1 Answers

React is "just a framework and methodology running in javascript" when running in the browser, so you can do literally anything you want "in React without X" because you can do anything you'd want to do in a browser using JS, and you always get JS =)

If you need the URL updated to include query args, you can do that with history.replaceState. If you need to read them in, you want URLSearchParams. The question with React is mostly "when do you do this", to which the answer is typically "in componentDidMount, in whatever component that you designed to have all the information necessary".

(Or as a useEffect in a function component, but since that triggers on ever render(), using a class component just makes things so much easier in cases like these).

user_7405530
Related