在本地工作但未部署在heroku上的React路由器

Question

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

static.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')
})

应用程序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>
  
  );
}

Answer 1

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

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

>

使用hashrouter而不是browserrouter，URL应如下所示：

your_server:port/#/stocks/aapl

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