只要我先加載 index.html，React Router 就可以在 Heroku 上為我的 MERN 應用程式作業。如果我直接轉到地址欄中的路由（例如 mysite.com/products），客戶端路由將失敗。但是，從主頁單擊指向產品頁面的鏈接是有效的。
這個問題已經被廣泛討論了很多年，但我無法在我的環境中解決這個問題。戰略已經演變，目前尚不清楚最好的情況是什么。
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.0"
我的專案結構是：
rootbackend: 快遞服務器frontend：反應應用
我嘗試將static.json檔案添加到專案根目錄。
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
我還嘗試在 Express 中處理路由回退。在我所有的路線之后，我有：
const __dirname = path.resolve()
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, '/frontend/build')))
} else {
app.get('/', (req, res) => {
res.send('API is running...')
})
}
// error handling middleware
// define error-handling middleware last, after other app.use() and routes calls
app.use(notFound) // 404 errors
app.use(errorHandler) // other errors
// for all non-api requests, return index.html from the build directory
app.get('*'),
(req, res) => {
res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
}
// server listener
const PORT = process.env.PORT || 6060
app.listen(PORT, () =>
console.log(
`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`.yellow.bold
)
)
我會很感激能洞察我錯過的東西。
uj5u.com熱心網友回復：
要解決：
- 將錯誤處理中間件放在最后。
- 設定構建目錄的靜態路徑
- 將所有非 API 路由定向到
index.html
不需要static.json。另外，請確保在 Heroku 配置變數中process.env.NODE_ENV設定為production。
const __dirname = path.resolve()
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, '/frontend/build')))
app.get('*', (req, res) =>
res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
)
} else {
app.get('/', (req, res) => {
res.send('API is running....')
})
}
// error handling middleware
// define error-handling middleware last, after other app.use() and routes calls
app.use(notFound) // 404 errors
app.use(errorHandler) // other errors
// server listener
const PORT = process.env.PORT || 6060
app.listen(PORT, () =>
console.log(
`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`.yellow.bold
)
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/402131.html