React-Router v6 未在生产中呈现

Question

我在这个问题上已经没有智慧了，希望任何可以让我走上正轨的想法。

我已经实现了一个 React.js SPA，它使用 react-router-dom v6 来浏览应用程序功能。该应用程序在我的本地主机上完美运行。当部署到生产环境时，<Route ... /> 不会呈现任何内容。

我已通过在<Routes> ... </Routes> 之外渲染<h2> 元素来检查部署路径是否正确。

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () => {
  const title = `${(process.env.REACT_APP_TITLE)}`;

  const TwentyfourStats = () => (<h2>Works</h2>);

  return (
    <Router>
      <div id="app" className="App">
        <h2>{title}</h2>
        <div>
          <Routes>
            <Route path="/" element={<TwentyfourStats />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

我尝试在 package.json 中调整 "homepage": "..." 时设置 <Routes homebase={}>，但没有任何区别。

非常感谢

更新：我在示例中内联了组件 <TwentyfourStats /> 以删除文件夹结构上的任何依赖项。结果是一样的。

更新 2：问题已解决，正如 @VitaliyRayets 指出的那样，使用 HashRouter 而不是 BrowserRouter（请参阅答案）。

Answer 1

您使用使用 HTML5 历史 API 的 BrowserRouter。然后你访问主页。它不起作用，因为在生产中服务器会查找文件/，而该文件实际上并不存在。要解决此问题，需要配置服务器，以便在您的生产构建中为任何路由的请求提供index.html 文件。如果你使用express.js，可以如下进行。

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req,res) {
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

如果您使用Nginx。配置：

location / {
  try_files $uri $uri/ /index.html;
}

Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

您也可以使用FallbackResource，而不是mod_rewrite。

如果您无法访问服务器，您可以使用HashRouter，它使用 URL 的哈希部分（即window.location.hash）来使您的 UI 与 URL 保持同步。