BrowserRoute伺服器配置

2022-06-23 23:03:15 字數 2503 閱讀 5198

在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

c STL(六 空間配置器 記憶體配置器)

以stl運用的角度而言,空間配置器是最不需要介紹的,它總是藏在一切元件的背後,默默工作。整個stl的操作物件都存放在容器之中 vertor...

WebLogic 伺服器配置

環境版本 windows 8 1 weblogic 10 3 0 jdk 1 6 weblogic 建立域在windows環境下有兩種方式...

linux配置閘道器

linux配置閘道器 輸入賬號root 再輸入安裝過程中設定的密碼,登入到系統 vi etc sysconfig network scrip...