BrowserRoute伺服器配置

在react專案中我們經常需要採用react-router來配置我們的頁面路由，react-router 是建立在 history 之上的，常見的history路由方案有三種形式，分別是：

1）hashhistory

2）browserhistory

3）creatememoryhistory

hashhistory使用 url 中的 hash（#）部分去建立形如example.com/#/some/path的路由。

browserhistory是使用 react-router 的應用推薦的 history方案。它使用瀏覽器中的 history api 用於處理 url，建立乙個像example.com/list/123這樣真實的 url 。

import react from "react";
import reactdom from "react-dom";
import from 'react-router';
import index from "../routes/helloworld";
import list from "../routes/bloglist";
import about from "../routes/about";
render() 
); }
}reactdom.render(
,);

但是我們當我們採用browserhistory方案時，通常會遇到瀏覽器重新整理404 的問題。

在react + react-router實現的spa(單頁面應用)專案中，當我們路由模式採用browserhistory時，點選每個導航都可以顯示正確的頁面，一旦瀏覽器重新整理，頁面就顯示cannot get（404）。

如當我們點選list鏈結，進入list頁面之後，正常顯示list頁面內容，這時如果我們重新整理頁面，頁面將會出錯，返回cannot get /list。

當重新整理頁面時，瀏覽器會向伺服器請求example.com/list，伺服器實際會去找根目錄下list.html這個檔案，發現找不到，因為實際上我們的伺服器並沒有這樣的物理路徑/檔案或沒有配置處理這個路由，所有內容都是通過react-router去渲染react元件，自然會報404錯誤。這種情況我們可以通過配置nginx或通過自建node伺服器來解決。

採用nginx方案需要先將所有資源打包生成到對應的目錄，比如dist，然後做如下配置：

server 
}

通過配置nginx，訪問任何uri都指向index.html，瀏覽器上的path，會自動被react-router處理，進行無重新整理跳轉。

這個解決方法很簡單，直接在執行時加入引數「–history-api-fallback」就可以了。我們修改package.json相關的**:

"scripts": ,

乙個express應用的配置示例：

const express = require('express');
const path = require('path');
const port = process.env.port || 8080;
//載入指定目錄靜態資源
//配置任何請求都轉到index.html，而index.html會根據react-router規則去匹配任何乙個route
(request, response))
function
() )

乙個koa應用的配置示例：

import koa from 'koa';
import xtpl from 'koa-xtpl';
import path from 'path';
koa();
const port = process.env.port || 8081;
root: path.resolve(__dirname, '../dist'),
extname: 'html',
commands: {}
}));
await ctx.render('index', {});
}); console.log('server started on port' +port);
});

注意: 由於koa的這種方式埠與webpack-dev-server（8080）必須不同，所以還需要配合nginx**。例如：

server 
}server 
}

既然我們的nginx**用了真實網域名稱，自然別忘了修改一下host，如下：

127.0.0.1 react.thinktxt.com

127.0.0.1 static.react.thinktxt.com

BrowserRoute伺服器配置

伺服器安裝Linux伺服器

mysql udp伺服器 UDP伺服器

伺服器安裝apache伺服器

BrowserRoute伺服器配置

伺服器安裝Linux伺服器

mysql udp伺服器 UDP伺服器

伺服器安裝apache伺服器

相關推薦