Docs for create-react-app解释了如何从不同的相对路径提供相同的构建版本。
如果您将主页设置为

"homepage": ".",

资产将相对于index.html提供服务。然后，您就可以将应用从http://mywebsite.example移动到http://mywebsite.example/relativepath，甚至http://mywebsite.example/relative/path，而无需重新构建。
出于开发目的，使用yarn start或npm start提供服务就足够了。

您可以使用PUBLIC_URL环境变量来覆盖特定构建的主页，最好在package.json中设置它，例如：

{
  // ...
  "scripts": {
    "build": "react-scripts build",
    "build-localhost": "PUBLIC_URL=/ react-scripts build"
    // ...
  }
  // ...
}

对于 * 还 * 涵盖react-router-dom的一体式答案：
1.添加package.json['homepage']作为您的生产URL。需要注意的是，CRA构建步骤删除了URL的域部分，只留下索引路径。
1.为本地主机构建时，执行PUBLIC_URL=/ npm run build
1.按照this article中的建议，在您的public/index.html页面中添加<base href="%PUBLIC_URL%" />;它将为资产（img、CSS）提供支持，并将公开%PUBLIC_URL%以供以后重用。
1.在创建BrowserRouter （通常为App.js或main.js） 的组件中，添加：

const basename = document.querySelector('base')?.getAttribute('href') ?? '/'

1.用作：<BrowserRouter basename={basename} />

您可以使用您的开发shell环境覆盖主页设置：

$ export PUBLIC_URL=http://localhost:3000/ 
$ yarn start

或者，如果您愿意，可以在生成产品之前删除主页设置并配置env：

$ export PUBLIC_URL=http://example.com/subdir 
$ yarn build

我也遇到过类似的情况，当我在package.json中添加了“homepage”并将其部署到gh-pages中时，图像不会出现。在尝试了许多不同的解决方案后，我最终解决了这个问题，将图像从public文件夹中取出并放到src文件夹中。

<img src="/img/image.JPG" alt="image" />

到

<img src={require('../../assets/image.JPG')} alt="image" />

这似乎对我起到了作用！