使用反應應用程序中的路由問題

Question

我有一個Web應用程序。後端與節點和前端與React。設置（簡體）是這樣的：

index.js (the server) 
client 
package.json 

客戶

現在，client文件夾包含前端Web應用程序，其內容爲，當你鍵入創建反應的，你得到了什麼基本相同-app。

Inside client有一個build文件夾，我通過在client文件夾中運行npm run build創建。

服務器

現在，index.js從我的主文件夾作爲節點服務器，裏面我有這樣一句臺詞：

app.use(express.static(__dirname + "/client/build")); 

使用這種方法我已經合併我的節點服務器和客戶端前端應用程序（位於客戶端文件夾內）。你可以看到我告訴服務器服務於client/build的文件。

一切工作正常，直到我遇到了這個。

如果我在客戶端應用程序，它使用手動說我叫路由器點擊一個按鈕反應：

this.props.router.push('/listmovies'); 

它正確顯示頁面。

但如果我輸入URL地址欄相同的頁面，按Enter鍵，我得到錯誤：

Cannot GET /listmovies

後者的錯誤，我敢肯定來自節點服務器。因爲index.js中沒有listmovies的收聽者（並且不應該有）。你基本上看到我認爲節點正在攔截呼叫並給我一個錯誤。而在我以前撥打router.push的情況下，我得到了一個正確的頁面。

我希望我能夠解釋我的問題。有人可以幫助解決這個問題嗎？

Answer 1

您必須使express應用程序將所有請求重定向到主文件React，以便react-router可以接管。類似於app.use下面的內容。

app.get('*', function(req, res) { 
     res.sendFile(__dirname + '/client/build/index.html') 
    }) 

這基本上處理所有通配符和它指向的index.html。請注意，如果您還在express應用上實施API路線，請將它們置於此通配符語句之上，否則它將攔截它們並將它們視爲客戶端react-router路由而不是服務器端API路由。