部署在不同位置（子目录）的 React-router 应用程序答案

【问题标题】：React-router app deployed on different locations (subdirectories)部署在不同位置（子目录）的 React-router 应用程序
【发布时间】：2018-05-09 09:43:26
【问题描述】：

我有一个 react-router 应用程序，我必须将它部署在不同的位置（子目录），所以基本名称会改变。例如，它应该具有以下路径：

/（生产）
/appname/env1
/appname/env2

我想使用浏览器历史记录，所以我从 react-router 实现了BrowserRouter，但我无法将静态基本名称传递给它。显然路由不起作用，例如如果我没有将任何基本名称传递给BrowserRouter，如果我的主页路由是：

<Route path="/" exact component={MyComponent} />

访问/appname/env1或/appname/env2时不起作用。

有没有办法通过 react-router 实现我正在寻找的东西？

【问题讨论】：

标签： reactjs react-router react-router-v4

【解决方案1】：

你可以像下面这样传递一个基本名称

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>

你可以在你的 webpack 配置中设置基本名称

 plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/appname/env1/")
    }),

【讨论】：

感谢您的回答！但是如果我事先不知道基本名称怎么办？在我的例子中，我们为每个开发分支部署在环境的不同子文件夹中，用于测试目的。
我不知道以下内容是否会对您有所帮助，但是当您知道环境是什么时，如何创建一个变量并使用它而不是 BASENAME
如果你使用 create-react-app 你也可以定义环境变量。 create-react-app.dev/docs/adding-custom-environment-variables

【解决方案2】：

这对我有用：

<Router basename={window.location.pathname.replace(/(\/[^/]*)$/, "")}>

这没有文档中要求的尾部斜杠：https://reactrouter.com/web/api/BrowserRouter/basename-string

例子

var pathname = "/pathname/routeName" 
console.log(pathname.replace(/(\/[^/]*)$/, "") //returns "/pathname"

见：https://regexr.com/5v3s3

【讨论】：