Dado que el concepto de raíz de contexto de aplicación web generalmente se considera una preocupación de implementación en lugar de una preocupación de desarrollo, me gustaría saber si es posible no codificar la raíz de contexto en el código fuente cuando se usa React Router para navegar por la página web.
Lo que me gustaría poder hacer es implementar mi aplicación web con cualquier raíz de contexto según lo especificado por los descriptores de implementación, por ejemplo, web.xml, sin cambiar nada de mi código fuente de React.
A continuación se muestra el seguimiento de la respuesta de Paul.
Ante todo, muchas gracias Pablo. Estoy totalmente de acuerdo en que la propiedad "nombre base" se puede usar en este sentido. Y podemos usar los scripts de compilación para sustituir "baseName" con diferentes valores que coincidirán con la raíz de contexto eventual especificada por los descriptores de implementación.
Sin embargo, diría que hacerlo solo ocultará, no cambiará, el hecho de que la raíz de contexto debe estar incrustada en el código fuente, lo que conceptualmente debería ser una preocupación de implementación.
Me pregunto mucho por qué React Router ha elegido no resolver la ruta "/" relativa a la raíz de contexto, es decir, hacer coincidir "/" con " http://host:port/webapp/ ", o al menos proporcionar una opción , p.ej
<Route path="/" relativeToContextRoot="true" …>Después de todo, tratar el valor real de una raíz de contexto no como una preocupación de desarrollo es más una norma que una excepción. ¿Sería esta una solicitud razonable para enviar al equipo de React Route?
React Router le permite especificar un nombre base para una aplicación. El nombre base se eliminará del nombre de la ruta y las ubicaciones se compararán con la parte restante de la ruta.
Por ejemplo, si establece un nombre base de /mysite , entonces una solicitud a /mysite/page-one intentará hacer coincidir el nombre de ruta /page-one con sus rutas definidas.
Establecer el valor del nombre base dinámicamente sería simplemente una cuestión de inyectar el valor en su código de una manera que le permita a su código acceder a ese valor mientras crea la instancia de history que utilizará su <Router> .
Una posible solución sería establecer una variable en la window cuando esté procesando el HTML.
<script> window.__BASENAME__ = '/some/root'; </script> Entonces podrá acceder a ese valor en su aplicación cuando cree su instancia de history .
const BASENAME = window.__BASENAME__ || '/'; const history = useRouterHistory(createHistory)({ basename: BASENAME });