我有一个 react-router 应用程序，我必须将其部署在不同的位置（子目录），因此基本名称会发生变化。例如，它应该具有以下路径：
/ （生产）
/appname/env1
/appname/env2
我想使用浏览器历史记录，所以我实现了BrowserRouterfrom react-router，但我无法向它传递静态基名。显然路由将不起作用，例如，如果我没有将任何基本名称传递给BrowserRouter，如果我的主页路由是：
<Route path="/" exact component={MyComponent} />
访问/appname/env1或时它不起作用/appname/env2。
有没有办法用 react-router 实现我正在寻找的东西？
你可以传递一个像下面这样的基本名称
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>
你可以在你的 webpack 配置中设置 basename
plugins: [
new webpack.DefinePlugin({
BASENAME: JSON.stringify("/appname/env1/")
}),
这对我有用：
<Router basename={window.location.pathname.replace(/(\/[^/]*)$/, "")}>
这没有文档中要求的尾部斜杠：https : //reactrouter.com/web/api/BrowserRouter/basename-string
例子
var pathname = "/pathname/routeName"
console.log(pathname.replace(/(\/[^/]*)$/, "") //returns "/pathname"