Cómo configurar react-router para que funcione en localhost y la URL de implementación en ruta: reactjs, react-router, webpack-dev-server, reaccion-router-dom

Estoy usando webpack-dev-server para alojar localmente un repo en localhost:1111. Hemos configurado Jenkins de tal manera que al ver este repositorio en cualquier rama se puede ver en una URL como jenkins.example.com/repo/branch/. Estoy tratando de configurar el enrutamiento con react-router

import { Router, Route, Link } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();

y estoy rindiendo como

<Router history={history}>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/Example">Example</Link>
</nav>
<Route exact path="/" render={Home} />
<Route path="/Example" render={Example} />
</div>
</Router>

Esto funciona en localhost como se esperaba. localhost:1111/Example rinde Example. Pero <Link to="/Example"> vínculos a jenkins.example.com/Example ahí. Utilizando ./Example No funciona del todo. ¿Cómo puedo configurar react-router de tal manera que continúa trabajando localmente como localhost:1111/Example pero usa una URL como jenkins.example.com/repo/branch/Example ¿en lugar?

Respuestas

Puedes usar <Router>"s basename Propiedad para resolver este problema. Así que para tu servidor Jenkins tienes que definir basename = "/repo/branch" y el enrutador funcionará como se espera.

Pero el problema es cómo se puede configurar dinámicamente basename para su enrutador Porque hoy usas a Jenkins, mañana. localhost Y pasado mañana es un servidor de producción.

Para este problema en particular puede usar una variable de entorno personalizada (por ejemplo, MY_APP_ROUTER_BASENAME) y pasarlo a la aplicación resultante a través de webpack.DefinePlugin como sigue:

// in your webpack.config.js

// get basename from your custom environment variable
const routerBasename = process.env.MY_APP_ROUTER_BASENAME

const config = {
...
plugins: [
...
new webpack.DefinePlugin({
process: {
env: {
ROUTER_BASENAME: JSON.stringify(routerBasename)
}
}
}),
...
],
...
}

module.exports = config

Y luego, en la base de código de tu aplicación, puedes obtener esta variable como esta:

// also set default value (for using at localhost for example)
const basename = process.env.ROUTER_BASENAME || "/"

...

<Router history={history} basename={basename}>
...
</Router>