React-Router-Dom browserrouter在构建后不工作

Question

这是我第一次尝试反应。我使用create-react-app创建一个项目，然后用于路由，我将React Router V4用于Web react-router-dom。

这是我的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

使用npm start启动服务器时没有问题。但是，当我使用npm run build构建该应用程序时，将其放入Apache服务器中的www文件夹中并访问它，我只会在root div中使用<!-- react-empty: 1 -->获取空页。

<div id="root">
  <!-- react-empty: 1 -->
</div>

我曾尝试寻找类似的情况，但是关于在webpack.config.js或Gulp中添加historyApiFallback的答案总是我找不到create-react-app模板中的任何地方。

我尝试过HashRouter，它工作正常，但是URL中有/#/是不希望的。

构建应用程序后，如何使浏览器工作？

Answer 1

好吧，根本没有问题。即使是使用npm run build构建的，它也有效。我最好的猜测是：您将文件放在错误的文件夹中。

使用npm run build构建代码时，static文件夹应放置在MallApp文件夹中。因此，您的文件夹结构应该是这样：

/var/www/mywebfolder/index.html
/var/www/mywebfolder/MallApp/static

检查浏览器的控制台，我相信它包含错误。无法获取JS和CSS文件。