React Router 在本地工作，但未部署在 heroku 上答案

【问题标题】：React Router working locally but not deployed on herokuReact Router 在本地工作，但未部署在 heroku 上
【发布时间】：2021-01-12 01:02:14
【问题描述】：

我在 localhost 上运行了我的应用程序，一切正常，但是一旦我在 heroku 上部署，主页就可以正常工作，但是当我点击“my-app/stocks/AAPL”时，我得到了 404。我看过其他人解决了这个问题并添加了一个 static.json 文件，但这并没有帮助。我已经粘贴了我的 server.js、我的文件夹结构、static.json 和我的 App.js 中的代码以供参考。

静态.json

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

server.js

const stockRouter = require('./routes/stock')
const userRouter = require('./routes/user')
const express = require('express')
const path = require('path');
const mongoose = require('mongoose')
const cors = require('cors');

require('dotenv').config()
const app = express()


app.use(cors())
app.use(express.json())

mongoose.connect(process.env.MONGO_URI, {useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true});
const connection = mongoose.connection

connection.on('error', console.error.bind(console, 'connection error:'));

connection.once('open', function() {
  console.log('MongoDB connection successful')
});

app.use('/stock', stockRouter)
app.use('/user', userRouter)

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
}

// for local env, use /client/public folder
else {
  app.use(express.static(path.join(__dirname, '/client/public')));
}

// server the client index.html file for all requests
app.get("*", function(req, res) {
  res.sendFile(path.join(__dirname, "./client/public/index.html"));
});

app.listen(process.env.PORT || 5000, (req, res) => {
    console.log('Listening')
})

app.js

function App() {
  return (

    <Router>
      <ThemeProvider theme={theme}>
    <div className="App">
    <Container maxWidth='lg'>
      <Paper style={{ backgroundColor: '#f5f6f7'}}>
      <Nav></Nav>
      <Route exact path='/' component={StockTabs} />
      <Route exact path='/stocks/:symbol' component={StockInfo} />
      </Paper>
      </Container>
    </div>
    </ThemeProvider>
    </Router>
  
  );
}

文件结构

【问题讨论】：

标签： reactjs heroku

【解决方案1】：

当您点击 URL：my-app/stocks/AAPL 时，浏览器的默认行为是向您的服务器发送请求，而您的服务器上没有该路由的处理程序，因此返回 404。

你有两种方法来处理这种情况：

使用HashRouter 而不是BrowserRouter，您的网址应如下所示：

YOUR_SERVER:PORT/#/stocks/AAPL

URL 上的# 不会触发服务器调用，路由将完全由客户端处理。

您仍然可以使用BrowserRouter，但需要在您的服务器上进行配置，请阅读该帖子了解更多信息：React-router urls don't work when refreshing or writing manually

【讨论】：