reactjs - React-Router v6 未在生产中呈现

Question

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

我已经实现了一个使用 react-router-dom 的 React.js SPA v6 浏览应用程序功能。该应用程序在我的本地主机上完美运行。当部署到生产环境时 <Route ... />什么都不渲染。

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

应用程序.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;

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

非常感谢

更新:我已经内联组件 <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>

除了 mod_rewrite，您还可以使用 FallbackResource .

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