使用Express服務反應路線

Question

我正在像這樣的死記硬背上使用react-router-dom和load組件：

    <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/services" component={Services} />
        ...and so on...
        <Route component={PageNotFound} />
    </Switch>

我使用webpack構建該項目，並且只有1個單個文件bundle.js。 並在我的server.js中將其用作靜態文件

import express from 'express'
const app = express()
app.use('/', express.static('./public'))
app.listen(3000)

在我開始嘗試在某些路線上進行某些操作之前，一切工作都很好：

app.get('/services', () => {
  console.log('services')
})

當我在路線“ /服務”上時，它不會在控制台中記錄“服務”。

Answer 1

您需要了解瀏覽器呈現路線和Express呈現路徑之間的區別。 它們是完全不同的兩件事。 刷新瀏覽器時，Express不知道如何處理“ /服務”，因此會出現錯誤。 當您鍵入“ / api / services”時，express確實知道如何處理路徑。 當React / React-Router完全加載到瀏覽器中時，它不向Express服務器請求“ /服務”，瀏覽器已經知道路由器，並呈現HTML。

您需要一個通配符路由匹配“ *”，以呈現default / index.html文件。 這將使您的瀏覽器可以找到“ /服務”頁面。 這很復雜，但是從根本上講，您的瀏覽器將其稱為“ / services”，這表示要嘗試找到路徑匹配項。 如果您有一個通配符指向index.html頁面，那么它將返回到瀏覽器。 然后，瀏覽器查看路由“ / services”，並將其傳遞給React Router，然后由后者加載服務組件。 您總是返回相同的HTML（索引/默認值），這是瀏覽器神奇地顯示正確頁面的原因。 這就是為什么擁有不同的路徑/路由（路徑：“ / api / services”，路由：“ / services”）很重要的原因。

如果您不這樣做，那么在“ / services”路由上刷新頁面的用戶將點擊express並獲得“ / services”路徑。

路徑：URL到代碼“ / api / services”塊的Express模式匹配

route：用於呈現給定組件的ReactRouter URL

Answer 2

確保您的后端路由不同，否則會造成混淆。

app.get('/api/services', () => {
  console.log('services')
})

這樣我們知道：

/ services =您的React-router組件

/ api / services =后端的API調用