Question

我正在构建一个基于React的网站，以create-react-app开头并使用react-router-dom`。这是我的结构：

index.js

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();

App.js

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>
    );
  }
};

当我在本地服务器上运行它时效果非常好。我可以导航到路线中定义的所有URL，我确切地看到了预期的内容。

当我执行git push heroku master时，麻烦就开始了。虽然它在Heroku上完美构建，没有错误消息，但我只能打开主页（“/”）。例如，如果我导航到“/ curriculum”，则会收到404 Not Found错误消息。

重要：

这是Heroku网址：http://eddealmeida.herokuapp.com/

我对React比较新，这是我第一次在Heroku上主持React。我使用这个buildpack here创建了我的Heroku应用程序。

我错过了什么吗？

哦，在我忘记之前......当我使用heroku local在本地运行时，它也能很好地运行。只有Heroku才会出现问题！

Answer 1

根据您正在使用的buildpack的the documentation，您需要通过创建static.json文件来配置Heroku应用以进行路由：

React Router（未包含）可以轻松使用基于散列的网址，例如https://example.com/index.html#/users/me/edit。这很好＆amp;开始使用本地开发时很容易，但对于公共应用，您可能需要真实的网址，例如https://example.com/users/me/edit。

使用React Router v3＆amp;创建一个static.json文件，为干净的browserHistory配置Web服务器。 BrowserRouter with v4：

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

React Router在localhost和Heroku上的行为有所不同

index.js

App.js

重要：

1 个答案: