反应路由以获取子文件夹中的捆绑包答案

【问题标题】：React routing to get bundles in a subfolder反应路由以获取子文件夹中的捆绑包
【发布时间】：2020-12-22 16:17:47
【问题描述】：

我构建了一个非常简单的 React 应用程序，并安装在 IIS10 网站的子文件夹下。

问题是没有办法告诉 react 它必须在这个文件夹下而不是直接在根目录下获取静态资源、js 和 css 捆绑块。

我已经添加了 package.json 中的主页值和 BrowserRouter 中的基本名称，如下所述：https://reactrouter.com/web/api/BrowserRouter 但它不起作用。

这是 app.jsx 中的代码：

import * as React from 'react';
import '@brains/ui/src/globals/scss/styles.scss';
import './fontawesome/all.css'
import './App.css';
import MyComponent from './MyComponent';
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename="/mySubFolder">
      <Switch>
          <Route
            exact
            path="/"
            render={(props) => <MyComponent {...props} />}
          />
      </Switch>    
    </BrowserRouter>
  )
}
export default App;

我已将构建放在服务器上，但 react 应用程序始终在 www.mydomain.com/static/.. 中搜索静态文件。而不是www.mydomain.com/mysubfolder/static/..。

我还能尝试什么？

【问题讨论】：

标签： reactjs iis react-router

【解决方案1】：

如果您使用 create-react-app，所有静态文件通常都使用 PUBLIC_URL 环境变量提供服务。因此，您应该能够使用.env 文件或使用EXPORT（或您的操作系统上的任何等效项）手动设置它，因此您将获得以下信息：

PUBLIC_URL=www.mydomain.com/mysubfolder/

这应该使所有静态文件都从www.mydomain.com/mysubfolder/static/... 提供您想要的。你可以在这里阅读更多信息：https://create-react-app.dev/docs/using-the-public-folder/

React-router 对文件的静态服务没有影响。它仅用于页面路由。

【讨论】：