Reactjs:在新标签中打开链接在开发中工作得很好，但在生产中状态代码为404

Question

我在新选项卡中打开链接时遇到问题。然而，使用以下代码，它在开发中运行良好：

main-menu.js

export class ReportsPopover extends Component {
render() {
var agencyId = AgencyInfo.getSelectedAgencyId();
var url = '/pqi-graph?agencyId='+ agencyId;
const menu =
<Menu>
<MenuDivider title="Reports" />
<MenuItem style={{ overflowX: "visible" }} fitted key="Reports" text="Performance Forecast">                              
<Link to={url} target="_blank" style={{ overflowX: "visible", color: 'black' }}>
<MenuItem 
fitted key="pqi"
text="PQI Graph"/>
</Link>
</MenuItem>                
</Menu>;

index.js

import PQIGraph from './reports/pqi-graph';
<Route path="/pqi-graph" component={PQIGraph} />

Config.json

{
"server": "http://localhost:3001",
"homeUrl": "http://localhost:3000",
"pqi-graph": "http://localhost:3000/pqi-graph",
"dev": true,
"homepage":  "/"
}

在我放入命令npm run build之前，我将更改Config.js文件如下：

{
"server": "http://example.com:3001",
"homeUrl": "http://example.com/xyz",
"pqi-graph": "http://example.com/pqi-graph",
"dev": true,
"homepage":  "/xyz"
}

package.json{"name": "grit-app","homepage": "/xyz",}

我将构建文件夹的内容放入目录xyz中。当我尝试在生产中打开页面时，它会给我404。任何帮助都将不胜感激。感谢

Answer 1

当您在iis中托管站点时，您需要使用构建文件夹作为站点文件夹路径。

此外，您可能需要使用iis URL重写规则设置react规则：

<rule name="Imported Rule 1" stopProcessing="true">
<match url="^" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
<add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
</conditions>
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="^" ignoreCase="false" />
<action type="Rewrite" url="/path/to/subfolder/index.html" />
</rule>