【发布时间】：2020-09-26 18:00:18
【问题描述】：
我编写了一个 React 应用程序，其中我使用 react-router-dom 和 Link 和 Route 对，例如
<Link to="/subpath"> <Route path="/subpath"> 或
<Link to="/basepath/subpath"> <Route path="/basepath/subpath">
在开发中，无论有无 /basepath 的链接和路由都可以正常工作。但是，在 npm run build 之后，只有第一次加载基本 URL 有效。我在应用程序上所做的任何事情都会导致基本路径从 URL 中消失。例如，如果我点击一个
<Link to="/subpath"> 或
<Link to="/basepath/subpath">，两者都应该带我去
https://domain/basepath/subpath，我到了
https://domain/subpath
该应用程序继续运行，但无法再找到图像，例如页面刷新自然失败。
我已经尝试了我从互联网上找到的所有可能会影响这一点的方法，例如将 basename 添加到 BrowserRouter，将主页设置为 package.json，使用 PUBLIC_URL 构建，并将 basepath 添加到每个 Link 和 Route 标签。 （我什至尝试在 Link 标记中给出基本路径两次，但两个基本路径都从 URL 中消失了。:-)）
如何让 React Router 将基本路径保留在 URL 中？
编辑：示例链接路由对：
<Link to={"/somepath/path/" + someId}>
<img src={"https://domain/somepath/" + image + ".jpg"} />
</Link>
<Route path="/somepath/path/:someId">
<ShowImage />
</Route>
链接和路由路径也可以不带/somepath，即。 “/path/...”，在开发中没有区别，但在生产中也没有。
单击该链接应使浏览器转到https://domain/somepath/path/someId，
但它去
https://domain/path/someId
该应用程序和路由似乎工作得很好，因为它接下来显示 ShowImage。然而，同时图像源显然变成了
https://domain/image.jpg
因为 ShowImage 无法从相同的源地址找到相同的图像。
编辑 2：
路由器结构。
<Router>
<Switch>
<Route path="/somepath/:someId">
<ShowImage />
</Route>
<Route path="/">
<ShowBase />
</Route>
</Switch>
</Router>
显示图像的 ShowBase 和 ShowImage 代码。
<img src={"https://domain/basepath/" + image + ".jpg"} />
ShowImage history.push（带或不带 /basepath）和按钮处理。
function handleClick(event) {
history.push('/');
}
<button onClick={handleClick}>Back</button>
【问题讨论】：
-
所以你只在生产中遇到这个问题。在本地开发机器上一切正常。我对吗？您是否在应用程序的任何地方使用
history.push？您能否在问题或沙盒中显示您的完整Route设置？以及您用于更改路线的所有方法，使用<Link>和/或history.push。 -
是的，开发中一切正常。是的，我也在很多地方使用
history.push，与链接的路线相同。你认为 history.pushs 导致了这个？我可以在没有一个 history.push 的情况下重写代码，但这会对应用程序的工作方式产生轻微的不利影响。不过还不错。 -
history.push('/hello')从localhost:3000/some/url到localhost:3000/hello而history.push('hello')从localhost:3000/some/url到localhost:3000/some/hello。注意“push”中的“hello”和“/hello”。正如我提到的here。但是您的问题似乎有所不同，因为它适用于 dev 而不是 prod。此外，请确保您使用/（前导斜杠）执行history.push。我会尝试重现您的问题。 -
谢谢。我在每个 Link 和 history.push 中使用前导斜杠。
-
@tim 如果您找到了问题的解决方案，那么您应该将其发布在答案部分。您不应编辑您的问题或添加 [SOLVED] 等。
标签： javascript reactjs router