使用 react-router-dom 的 React+IIS 路由问题答案

【问题标题】：React+IIS Routing Issues Using react-router-dom使用 react-router-dom 的 React+IIS 路由问题
【发布时间】：2022-06-15 03:59:41
【问题描述】：

我目前正在努力将我的 React 应用程序部署到 IIS 中。该应用程序在本地运行良好，但是当部署到测试服务器时，它不会加载任何页面。我已经尝试了几种配置，但似乎无法弄清楚，我得到的最接近的是从 index.html 加载背景图像。目前，我最初会得到 200，没有返回页面/图像，然后在任何后续刷新时得到 304，除了空白的 html 页面之外，没有返回 304。

我的 web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在 package.json 我的主页是

  "homepage": "/",

App.js

import './App.css';
    import HomePage from './pages/HomePage';
    import { BrowserRouter as Router, Routes, Route,useNavigate } from 'react-router-dom';
    
    function App() {
      
      return (
        <div className="App">
          <header className="App-header container">
            
            <Router basename='https://my-base-url'>
              <Routes>
              <Route exact path="/" element={<HomePage />}  />
          <Route exact path="/:paramA/:paramB" element={<a-web-page />}  />
              </Routes>
            </Router>
            </header>
        </div>
      );
    }
    
    export default App;

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <base href="./" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">

  </div>
</body>

</html>

【问题讨论】：

"homepage": ".", 对您有影响吗？

标签： reactjs iis react-router web-config react-router-dom