替代非 create-react-app 应用程序中的 create-react-app“主页”设置答案

【问题标题】：Substitute for create-react-app "homepage" setting in a non create-react-app application替代非 create-react-app 应用程序中的 create-react-app“主页”设置
【发布时间】：2020-10-08 14:21:30
【问题描述】：

在 create-react-app 应用程序中，在 package.json 中设置我的主页可以满足我的期望。我将其设置为： homepage: '/someUrl' 并且在我的应用程序中，如果我的 URL 是 localhost:3000/someUrl/another，并且我刷新，它会毫无问题地出现。

在我的非 create-react-app 应用程序中（它仍然是一个 react 项目，刚刚从头开始），如果我以正常方式导航到 localhost:3000/someUrl/another 我会得到页面，但是如果我点击刷新我得到一个白页： Cannot GET /someUrl/another

有人遇到过这个吗？我试图弄清楚 create-react-app 中的“主页”设置究竟做了什么，以便我可以在我的非 CRA 反应应用程序中复制它。

感谢您的帮助，克里斯

【问题讨论】：

标签： reactjs routes create-react-app react-router-dom

【解决方案1】：

让我们尝试使用 History HTML5 来配置主页和使用 webpack 的 publicPath 配置来配置资产路径。示例：

import { createBrowserHistory } from "history";
export default createBrowserHistory({
  basename: YOUR_HOME_PAGE,
  hashType: "slash"
});

以及在 webpack 配置中：（在配置路径资产的情况下，以防止生产中出现 404）

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
    publicPath: YOUR_HOME_PAGE
}

希望对您有所帮助！

【讨论】：

我了解 webpack 配置的部分，但我将如何使用： import { createBrowserHistory } from "history"; export default createBrowserHistory({ basename: YOUR_HOME_PAGE, hashType: "slash" });
如果您的路由器不使用哈希#，请删除行哈希类型，仅使用基本名称：YOUR_BASE_NAME。所以你的 URL 应用程序总是 url/YOUR_BASE_NAME/:path-router。