Javascript React路由器在localhost和Heroku上的行为不同

我正在建立一个基于React的网站，从创建React应用程序开始，并使用React路由器dom`。这是我的结构：

index.js

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(

我对React比较陌生，这是我第一次在Heroku托管React。我使用这个构建包创建了我的Heroku应用程序

我错过什么了吗

哦，在我忘记之前…当我使用heroku local在本地运行时，它也能很好地工作。只有在heroku才会出现问题！
根据您正在使用的构建包的类型，您需要通过创建一个
static.json
文件来配置heroku应用程序进行路由：

React Router（不包括在内）可以很容易地使用基于哈希的URL，比如。这在开始本地开发时很好，也很容易，但是对于一个公共应用程序，你可能需要像这样的真实URL

创建一个static.json文件，配置web服务器，以便使用React Router v3和BrowserRouter with v4清除browserHistory：

太好了！谢谢。我在阅读文档时没有注意到这个事实。我承认这是一个肤浅的阅读。
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import reducers from './reducers';

import Menu from './components/Menu';

import Blog from './components/Blog';
import Books from './components/Books';
import Contact from './components/Contact';
import Curriculum from './components/Curriculum';
import Lectures from './components/Lectures';
import MainPage from './components/MainPage';
import Mathematics from './components/Mathematics';
import SocialNetworks from './components/SocialNetworks';
import Software from './components/Software';

export default class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers)}>
        <div className="contents">
            <div className="banner-top shadowed-text">
                <div className="my-name">
                    Ed de Almeida
                </div>
                <div className="my-professions">
                    Mathematician, Software Developer, Writer and Lecturer
                </div>
                <SocialNetworks />
            </div>
            <Menu />
            <div className="page-area">
                <BrowserRouter>
                    <div className="top-margin-area">
                        <Route exact path="/" component={MainPage} />
                        <Route path="/curriculum" component={Curriculum} />
                        <Route path="/math" component={Mathematics} />
                        <Route path="/software" component={Software} />
                        <Route path="/blog" component={Blog} />
                        <Route path="/books" component={Books} />
                        <Route path="/lectures" component={Lectures} />
                        <Route path="/contact" component={Contact} />
                    </div>
                </BrowserRouter>
            </div>
        </div>
      </Provider>
    );
  }
};

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}