react-router-dom BrowserRouter在构建后不起作用

Posted 2023-02-22

【中文标题】react-router-dom BrowserRouter在构建后不起作用

【英文标题】：react-router-dom BrowserRouter not working after build

【发布时间】：2018-02-07 01:22:22

【问题描述】：

这是我第一次尝试做出反应。 我使用 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 构建应用程序并将其放入我的Apache 服务器的www 文件夹并访问它时，我只会在root div 中获得带有<!-- react-empty: 1 --> 的空白页面。

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

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

我尝试过HashRouter，它工作正常，但网址中有/#/，这是不可取的。

构建应用后如何让 BrowserRouter 工作？

【问题讨论】：

你能分享一下github repo吗？这是检查代码的唯一方法。 create-react-app 和 react-router v4 从来没有遇到过这个问题，所以你这边一定有问题。

抱歉回复晚了，这是我的 github 仓库。 github.com/fadeltd/mall-app

问题在于您提供页面的方式。如果您使用类似localhost/myproject 的方式访问它。那么它会假设需要渲染的路由将是带有myproject路径的路由，所以如果是这种情况，请添加前缀

【参考方案1】：

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

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

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

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

【讨论】：

不。一切正常。控制台为空。 dropbox.com/sh/2anki8hncblooq6/AACySxivCMakTdH5-SW8KRQ3a

只有一种可能：您的浏览器存在 HTML5 History API 问题。因为BrowserRouter需要它。至于您关于 webpack 配置的问题，您需要运行 npm run eject。它会将所有配置文件“提取”到您的项目文件夹中。虽然这是一种单向操作，所以如果您不了解如何使用 babel、webpack、lint 等，请不要这样做。