node服務適配前端路由

可能網上已經大把相似的資料了，在這裏只不過是總結一下

用react舉例

在react-router 4.0版本中，BrowserRouter和HashRouter均可以實現前端路由的功能，區別是前者基於rul的pathname段，後者基於hash段。

前者：http://127.0.0.1:3000/a/b

後者：http://127.0.0.1:3000/#/a/b（有個#老是讓人難以接受）

這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時，刷新頁面，BrowserRouter會將當前路由發送到服務器（由於是pathname），而HashRouter不會（由於是hash段）。

一般咱們都是使用BrowserRouter，前端路由在刷新瀏覽器的時候會被認爲是服務器的路由被髮送到服務器，然而服務器並無配置相關的路由，而後瀏覽器當前的連接就會顯示404。

能夠在node代碼中添加這麼一段代碼：

app.use(function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/mobile.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製代碼

這段代碼的意思就是說，只要服務器接收到瀏覽器發送過來的路由，在這個路由沒有在node中配置的狀況下，都會嘗試着把前端頁面發送回去，而後瀏覽器再去匹配前端路由。

我認爲這其中須要注意的地方：

前端路由和後端路由不能出現重複。

多個單頁面的時候應該如何配置？

前端打包多個單頁面應該不是新鮮話題了，工做中有時候也會用到。

前端文件在後端也是經過相應路由來發送的，好比說/mobile，就是發送mobile相關的html文件，/pc就是發送pc相關的html文件。

在mobile的這個單頁面中，須要node適配前端的路由，在pc的這個單頁面中，也須要node適配前端路由。要解決的問題就是讓node知道瀏覽器當前打開的究竟是mobile仍是pc。

個人作法是前端路由能適配node對應的路由，而後跟上述方法同樣，把多餘的路由的請求統一返回對應文件

mobile前端路由這樣：

<Route  path="/mobile/main" component={App} />
<Route path="/mobile/main/login" component={Login} />
複製代碼

後端路由這樣：

app.use('/mobile', function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/mobile.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製代碼

PC前端路由這樣：

<Route  path="/pc/main" component={App} />
<Route path="/pc/main/login" component={Login} />
複製代碼

後端路由這樣：

app.use('/pc', function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/pc.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製代碼

完！