Question

我托管了一个在heroku上使用webpack的MERN应用程序。 React Routing在本地主机上运行良好。但是在heroku上，当我单击/any-path页面上的刷新时，它被清空了。

控制台显示错误“未声明纯文本文档的字符编码。如果文档包含US-ASCII范围以外的字符，则该文档将在某些浏览器配置中呈现乱码。需要在传输协议中声明，或者文件需要使用字节顺序标记作为编码签名。”

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Raven</title>

  <link rel="icon" type="image/png" href="/assets/img/logo.png">
 <!--  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="/js/app.js"></script></body>
</html>

index.js

import React from 'react';
import { render } from 'react-dom';
import {Bootstrap, Grid, Row, Col} from 'react-bootstrap';

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'

import App from './components/App/App';
import NotFound from './components/App/NotFound';
import Home from './components/Home/Home';



import './styles/styles.scss';

render((
  <Router>
    <App>
      <Switch>
        <Route exact path="/" component={App}/>
        <Route exact path="/login" component={Home}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </Router>
), document.getElementById('app'));

server.js

  app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    res.end();
  });

单击刷新时，heroku上托管的React应用将变为空白

0 个答案: