具有相对路径部署的 React Router

Question

我的问题是关于react-router-dom 与部署到相对路径的结合（请参阅https://create-react-app.dev/docs/deployment#building-for-relative-paths）。在我的开发环境中，路由器工作正常，但是一旦我使用package.json 中设置的homepage 标记构建和部署我的应用程序，路由器似乎不再工作。

首先我会假设它会起作用。毕竟，它是一个构建选项，通过响应为特定 url 构建构建，我会假设与该相对路径相同的功能。但是，<Link to=""> 部分和 <Switch> 都不尊重我的 react 应用程序的相对路径。

其次，我还没有找到规避这种行为的解决方案。有什么想法吗？

处理反应路由器和相对路径的其他问题集中在一个完全不同的主题上。所以我还没有找到我的问题的答案。这个React-router app deployed on different locations (subdirectories) 可能正在接近并且可能是一种解决方法。

信息：

"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",

编辑和 PS：

我可能只需要设置一个基本名称。如果基本名称正在更改，我至少想从package.json 中的设置推断它，而不是根据某些package.json 设置更改我的代码。

编辑 2：

我可以使用basename={process.env.PUBLIC_URL} 将基本名称设置为正确的 URL。但是路线仍然不匹配。然而，这些链接似乎很好，所以<Link to="/xx"> 实际上会导致指向{process.env.PUBLIC_URL}/xx 的链接，这是所需的行为，但路由器<Switch> 与它们不匹配。 实际上这是回答，你可以从头开始。

使用basename={process.env.PUBLIC_URL} 确实解决了我的问题。

Answer 1

对我来说，basename={process.env.PUBLIC_URL} 不起作用。但是

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

做到了神奇，没有文档中要求的斜杠：https://reactrouter.com/web/api/BrowserRouter/basename-string

例子

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

Answer 2

对于遇到同样问题的任何人：阅读我原来问题中的编辑。使用basename={process.env.PUBLIC_URL} 确实解决了我的问题。