2 回答

• 32

  我实际上在通过react-router和heroku文档搜索3小时之前首先看到了这篇文章 . 对于swyx和其他任何有相同问题的人，我将概述为了使其工作所需的最低限度 .

  router.js - （显然将AppSplash和AppDemo更改为您的组件）

  export default <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={AppSplash}/>
      <Route path="demo" component={AppDemo}/>
    </Route>
  </Router>
  

  app.js

  import React, { Component } from 'react'
  
  class App extends Component {
  static propTypes = {
    children: PropTypes.node
  }
  
  render() {
    const { children } = this.props
    return (
      <div>
        {children}
      </div>
    )
  }
  }
  
  export default App
  

  在主目录的根目录中创建一个新文件，并将其命名为 static.json . 把它放进去 .

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

  再次推送到heroku . 路线应该这次工作 .

  Explanation:

  您需要修改Heroku的默认Webpack，否则服务会对如何处理客户端路由感到困惑 . 基本上是static.json的作用 . 其余的只是根据'react-router'文档处理路由的正确方法 .

  回复于 2024-04-28T00:22:33+08:00
• 20

  如何修复客户端路由错误（Heroku 404错误）：

  React Browser Router

  如果您正在使用React Browser Router，作为带有create-react-app的npm模块，那么解决方案（适用于我）就是创建一个 static.json 文件（与 package.json 在同一目录中） .

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

  Here is why this solution works:

  Create-react-app大部分是为客户端React提供服务的Node.Js服务器 . public 静态目录映射到 / endpoints ，从浏览器访问此 endpoints 将下载 index.html 网页 . 该网页反过来加载React组件 . 由于React Browser Router是React组件，因此在访问 / endpoints 后会动态加载路由 . 换句话说，在加载 index.html 网页之前，我们所有的React Browser路由器路由都会在Heroku上导致404错误 . 要解决此问题，可以使用 static.json 文件将具有以下模式 /** 的任何 endpoints 映射到 index.html 文件，该文件将加载React Browser Router并正确加载该路由的react组件 .

  From an Apache HTTP server:

  同样，在 public 目录中创建 .htaccess 文件会将所有与 /** 匹配的 endpoints 重新映射到Apache HTTP服务器上的 index.html 文件 .

  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
  

  More resources

  另请阅读 create-react-app README的"Deployment"部分，其中包含有关如何重新配置服务器以使用客户端路由的大量信息 .

  https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

  反应静态路由器

  最后，React Router提供了一个静态路由器React Static Router，它可以与Node.js服务器上的"react-dom/server" npm模块一起使用，以呈现JSX服务器端，并且不需要 static.json 或 .htaccess 重新配置 .

  回复于 2024-04-28T00:22:33+08:00