javascript - react-router-dom BrowserRouter 在构建后不工作

Question

这是我第一次尝试 React。我使用 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 构建应用程序时, 把它放在我的 www我的 Apache 服务器中的文件夹并访问它，我只得到带有 <!-- react-empty: 1 --> 的空页面在我的里面 root div .

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

我曾尝试寻找类似的案例，但答案总是关于添加 historyApiFallback在 webpack.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文件失败。