Question

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

/（制作）
/appname/env1
/appname/env2

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

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

访问/appname/env1或/appname/env2时，它无法正常工作。

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

Answer 1

您可以传递如下的基本名称

/article/1

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

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

Answer 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

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

2 个答案: