發球反應的路由與快遞

我使用的反應路由器-DOM和負載部件在這樣rotes：發球反應的路由與快遞

<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)

Eveything正常工作，直到我開始嘗試做一些我的路線的東西：

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

當我在路線「/服務'它不會在控制檯中記錄'服務'。

來源

2017-09-27 Dennis Braun

不知道這是爲什麼，但你必須在你的問題一個錯字 - 'services'和'/ serives' –

他們基本上是兩個完全不同的路線，從兩個雙不同的服務器。你需要告訴你的'express'服務器你的'react'服務路線。 'app.get（「/服務」）'會嘗試查詢的'express'後端的路線，而你正在試圖訪問一個'react'前端路線。 – DrunkDevKek

DrunkDevKek，有什麼方法可以告訴我的前端服務器？ –

你需要理解上的差異在瀏覽器渲染路線和Express渲染路徑之間。他們是兩個完全不同的東西。當您刷新瀏覽器時，Express不知道如何處理「/服務」，因此出現錯誤。當你輸入「/ api/services」時，express會知道如何處理路徑。如果REACT /陣營，路由器完全加載到瀏覽器中，它不會從Express服務器請求「/服務」，瀏覽器已經知道了那個路由器，並呈現HTML。

你需要一個通配符路由匹配「*」，將呈現缺省的/ index.html文件。這將允許您的瀏覽器找到「/服務」頁面。這很複雜，但基本上，您的瀏覽器會調用「/服務」，這種情況顯而易見，他試圖找到路徑匹配。如果您有一張指向index.html頁面的通配符，則會將其返回給瀏覽器。然後瀏覽器查看路由「/ services」並將其傳遞給React路由器，React路由器然後加載服務組件。你總是返回相同的HTML（索引/默認），它是不會顯示右頁的魔法瀏覽器。這就是爲什麼具有不同路徑/路由很重要（路徑：「/ api/services」，路由：「/ services」）

如果你沒有那麼用戶刷新頁面上的「/ services」路由將打擊快遞，並獲得「/服務」路徑

路徑：一個快速模式匹配的網址的代碼塊「/ API /服務」

路線：一個ReactRouter URL呈現給定的組件

來源

2017-09-28 08:25:56

謝謝你的回答！ –

確保你的後端路線是不同的，否則這得到混亂。

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

這樣，我們就知道：

/服務=你的陣營，路由器組件

/API /服務= API調用後端

來源

2017-09-27 10:15:21

我試過了 - 不起作用。但我注意到一件事：當我使用路由'/ api/services'的代碼，然後在URL字段中粘貼'http：// localhost：3000/services'時，我得到'Can not GET/services'消息在我的瀏覽器中，在我的終端中沒有任何東當我使用路由'/ services'的代碼並執行相同的操作時，它會鍵入'終端中的服務'（不在瀏覽器的控制檯中）並嘗試刷新頁面。它看起來很奇怪。 –

發球反應的路由與快遞

回答

相關問題