No estoy seguro de si esta pregunta puede sonar extraña, pero me pregunto si hay alguna manera de agregar parámetros de consulta a la URL cuando mi aplicación React se inicia sin React-Router.
Aquí hay un poco de contexto. Tengo una especie de micro aplicaciones front-end. Estoy usando Iframes para aplicaciones individuales y la aplicación de contenedor pasa algunas cadenas de consulta en la URL de Iframe cuando hacemos clic en un menú en la aplicación de contenedor. La aplicación contenedora usa React-Router pero ninguna de las aplicaciones secundarias lo usa. Para el desarrollo, ahora tengo que iniciar applets individuales y agregar los parámetros de consulta manualmente en la URL. Para ahorrar algo de tiempo, estoy tratando de codificar algunos parámetros para el entorno de desarrollo mientras se inicia React.
Al igual que podemos configurar el PUERTO, ¿hay alguna forma en el comando de inicio npm para manejar esto?
Mi comando de inicio actual "start": "set PORT=41100 && env-cmd -f .env.dev react-scripts start",
Lo que probé , intenté usar BROWSER y BROWSER_ARGS en el comando, pero no tuve éxito. No estoy seguro de si así es como se usa.
"start": "set PORT=41100 && set BROWSER=Chrome && set BROWSER_ARGS=\"param=val\" && env-cmd -f .env.dev react-scripts start",
Una opción de trabajo es agregar un poco de secuencia de comandos en index.jsx ,
if (process.env.NODE_ENV === "development" && !window.location.search) window.location.search = "abc=xyz";
Si alguien sabe cómo manejarlo en los scripts de NPM de alguna manera, hágamelo saber.
React es "solo un marco y una metodología que se ejecuta en javascript" cuando se ejecuta en el navegador, por lo que puede hacer literalmente lo que quiera "en React sin X" porque puede hacer cualquier cosa que quiera hacer en un navegador usando JS, y siempre obtienes JS =)
Si necesita actualizar la URL para incluir argumentos de consulta, puede hacerlo con history.replaceState . Si necesita leerlos, quiere URLSearchParams . La pregunta con React es principalmente "cuándo haces esto", a lo que la respuesta suele ser "en componentDidMount , en cualquier componente que hayas diseñado para tener toda la información necesaria".
(O como useEffect en un componente de función, pero dado que eso se activa al renderizar (), usar un componente de clase simplemente hace que las cosas sean mucho más fáciles en casos como estos).