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>

我试图寻找类似的情况，但总是回答有关添加historyApiFallback在webpack.config.js或一饮而尽，我不能在任何地方找到create-react-app模板。

我已经尝试过HashRouter ，它运行正常，但是url中的/#/是不可取的。

在构建应用程序后，如何让BrowserRouter工作？

Answer 1

嗯，完全没有问题。 它工作，即使它是使用npm run build 。 我最好的猜测是：您将文件放在错误的文件夹中。

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

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

检查浏览器的控制台，我认为它包含错误。 无法获取js和css文件。