如何设置React-Router以在路径下在Localhost和部署URL上工作

Question

我正在使用webpack-dev-server在localhost:1111上本地托管仓库。我们已经设置了Jenkins，以便在jenkins.example.com/repo/branch/之类的URL上可以看到任何分支上的回购。我现在尝试使用react-router

设置路由

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

和像

这样的渲染

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

这对Localhost进行了预期。localhost:1111/Example渲染Example。但是<Link to="/Example">链接到那里的jenkins.example.com/Example。使用./Example根本不起作用。我如何设置react-router，以使其继续以localhost:1111/Example的本地工作，但使用jenkins.example.com/repo/branch/Example之类的URL？

Answer 1

您可以使用<Router>的basename属性来解决此问题。因此，对于您的Jenkins服务器，您必须定义basename = '/repo/branch'，路由器将按预期工作。

但是问题是您如何为路由器动态设置basename。因为今天您使用Jenkins，明天localhost，第二天之后，它是生产服务器。

对于此特定问题，您可以使用自定义环境变量（例如MY_APP_ROUTER_BASENAME），然后通过webpack.DefinePlugin将其传递给生成的应用程序构建如下：

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

然后在您的应用代码库中您可以得到这样的变量：

// also set default value (for using at localhost for example)
const basename = process.env.ROUTER_BASENAME || '/'
...
<Router history={history} basename={basename}>
  ...
</Router>