Wie react-router eingerichtet wird, um auf localhost und Deployment URL unter Pfad

Question

zu arbeiten Ich verwende webpack-dev-server, um lokal ein Repo auf localhost:1111 zu hosten. Wir haben Jenkins so eingerichtet, dass das Drücken zu diesem Repo in jedem Zweig auf einer URL wie sichtbar ist. Ich versuche jetzt zu Setup-Routing mit react-router

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

und bin Rendering wie

<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> 

Dieses auf localhost funktioniert wie erwartet. localhost:1111/Example rendert Example. Aber <Link to="/Example"> Links zu jenkins.example.com/Example dort. Die Verwendung von ./Example funktioniert überhaupt nicht. Wie kann ich react-router so einrichten, dass es weiterhin lokal als localhost:1111/Example arbeitet, aber stattdessen eine URL wie jenkins.example.com/repo/branch/Example verwendet?

Answer 1

Sie können die <Router>basename Eigenschaft verwenden, um dieses Problem zu lösen. Also für Ihren Jenkins Server müssen Sie basename = '/repo/branch' definieren und Router wird wie erwartet funktionieren. Das Problem ist, wie Sie basename für Ihren Router dynamisch festlegen können. Weil Sie heute Jenkins verwenden, morgen localhost und übermorgen ist es ein Produktionsserver.

Für dieses spezielle Problem, das Sie benutzerdefinierte Umgebungsvariable (zB MY_APP_ROUTER_BASENAME) und an die resultierende App über webpack.DefinePlugin bauen wie folgt passieren können:

// 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 

Und dann in Ihrer Anwendung Code-Basis können Sie diese Variable erhalten wie folgt:

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

... 

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