static.json不适用于ReactJS路由和Heroku [英] static.json not working for ReactJS routes and Heroku

问题描述

从理论上讲，这应该可以工作，在/文件夹中添加文件/static.json，该文件将所有内容移至React index.html.

In theory this should work, adding at the / folder the file /static.json that makes everything go to the React index.html.

(相关)

React路由在本地计算机上有效，但在Heroku上不可用

https://github.com/heroku/heroku-buildpack-static#configuration

在我的情况下，它不起作用，我得到一个Cannot GET /hello而不是收到index.html.出乎意料的是，如果我直接进入/index.html，则会看到该页面，但没有激活任何路由.

In my case it doesn't work, I get a Cannot GET /hello instead of receiving the index.html. Surprisingly, if I go directly to /index.html I get the page but no route is activated.

发生了什么事，我该如何解决?

更新:尝试没有运气/static.jason /src/static.jason /client/static.jason /client/src/static.jason

/static.json

{
  "routes": {
    "/**": "index.html"
  }
}

/client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import FileUpload from './FileUpload';

ReactDOM.render(
  <div><FileUpload /></div>,
  document.getElementById('root')
);

/client/src/FileUpload.mjs

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

class TextFileReader extends Component {
 render() {
  return (
   <Router>
    <div>
     <Route path="/heyyo" render={() => <span>heyyo</span>} />
     <Route exact path="/" render={() => <div>resting</div>} />
     <Route path="/what" render={() => <div>what</div>} />
      NO ROUTES HERE
    </div>
   </Router>
  )
 }
}

export default TextFileReader;

推荐答案

最后，重新阅读更好的

Finally, re-reading better this React Routing works in local machine but not Heroku I've added this line to my Express

app.get('/*', (req, res) => {
  let url = path.join(__dirname, '../client/build', 'index.html');
  if (!url.startsWith('/app/')) // we're on local windows
    url = url.substring(1);
  res.sendFile(url);
});

并且一旦部署到Heroku，它就可以工作了:)

And once deployed to Heroku, it works :)

这篇关于static.json不适用于ReactJS路由和Heroku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！