使用 IIS 在子文件夹中提供 React 应用程序

Question

这是想要的结果：

1. http://{domain} 重定向到 http://{domain}/subfolder
2. 当在浏览器上放置 http://{domain}/subfolder/contacts 时，我希望它能够准确地提供所需的页面（联系人）

实际上，使用 IIS 的 URL Rewrite 只满足第一个条件，第二个给我一个 404 页面。这是令人讨厌的行为，因为如果用户刷新页面，IIS 将不会呈现我的 React 应用程序。

这是我在{domain} 的根子文件夹的 Web.config 中的 URL Rewrite 节点：

<rewrite> 
    <rules> 
      <rule name="react routes" stopProcessing="true"> 
         <match url=".*" /> 
         <action type="Redirect" url="/subfolder" /> 
      </rule> 
    </rules> 
</rewrite> 

这是我的代码：

import logo from './logo.svg';
import './App.css';
import {BrowserRouter,Switch,Route,Link} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <BrowserRouter basename="subfolder">
        <p>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contacts">
            <Contacts />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contacts">Contacts</Link></p>
        </BrowserRouter>
      </header>
    </div>
  );
}
function Home(){
  return <div>Home</div> 
}
function About(){
  return <div>About</div> 
}
function Contacts(){
  return <div>Contact</div> 
}

export default App;

Answer 1

尝试添加你的 package.json “主页”：“/子文件夹”