react-router-dom BrowserRouter在构建后无法正常工作

Question

这是我第一次尝试反应.我创建了一个项目create-react-app,然后用于路由,我使用React Router V4 for 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,将它放在我的wwwApache服务器的文件夹中并访问它,我只能<!-- react-empty: 1 -->在我的内部获得空白页面root div.

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

我试过寻找类似的情况,但答案总是关于添加historyApiFallbackwebpack.config.js或gulp,我在create-react-app模板的任何地方都找不到.

我试过了HashRouter,它运行正常,但是/#/在网址中有不合需要的.

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

Answer 1

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

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

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

检查您的浏览器控制台，我相信它包含错误。获取js和css文件失败。