为什么在构建后不工作 react-router-dom？

Question

链接在构建后不起作用，但它在 localhost:3000 中有效

我使用 react-router-dom 组件

使用以下方法构建项目：

npm run build

应用程序.js：

    return (  
      <div>
        <Router >
          <Header/>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/join" component={Join}/>
              <Route path="/advertisement" component={Advertisement}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/details" component={Details}/>

        </Router>
      </div>
    );
  }

和其他组件中的链接：

<ul>
    <li><Link to='/'>home</Link></li>
    <li><Link to='/about'>about us</Link></li>
    <li><Link to='/join'>join</Link></li>
    <li><Link to='/advertisement'>ads</Link></li>
    <li><Link to='/contact'>contact us</Link></li>
</ul>

包.json

"homepage": ".",

Answer 1

specific reason这种情况的背后有一个很深的原因。

第一个解决方案： react 是一个单页应用程序，因此当您构建应用程序时，服务器只知道 index.html，因此对于任何其他解决方案，url您将不得不为响应应用程序提供configure服务器fallback mechanism to index.html并在之后处理 url 处理。

第二种解决方案：如果您使用hash router，则不会发生此问题。
使用哈希路由器背后的原因是了解更多关于哈希路由器及其用例

import { HashRouter as Router, Route, Switch } from "react-router-dom"