Ngnix反向代理react-router配置问题解决方法

项目以react router实现，用ngnix做反向代理的时候出现404找不到页面，有两种解决方法。

第一种 将<Route path="*" component={NotFound} />对应的component改为<IndexRoute>对应的component，如下：

const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>

<Route path="*" component={DefaultPage} />

</Route>
</Router>

此时 Ngnix服务端配置如下

server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;

#access_log logs/host.access.log main;

location / {
proxy_pass http://10.248.26.202; proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /pt/ {
proxy_pass http://10.248.26.202:3083; rewrite "^/pt(.*)$" $1 break;
}
location /help/ {
proxy_pass http://10.248.26.202/help; }
location ~^/lc/ {
proxy_pass http://localhost:8080; rewrite "^/lc(.*)$" $1 break;
}

}

此时代理成功 但是字体加载不到 根据404请求的地址所以添加一个字体的规则

location ^~/fonts/{
rewrite "^(.*)/fonts(.*)$" $1/lc/fonts$2;
}

第二种方法

在路由中添加一条与uri对应的路径指向首页 如下

const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="*" component={DefaultPage} />
</Route>

</Router>

此时ngnix服务器端的配置如下

server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;

#access_log logs/host.access.log main;

location / {
proxy_pass http://10.248.26.202; }

location /pt/ {
proxy_pass http://10.248.26.202:3083; rewrite "^/pt(.*)$" $1 break;
}

location /help/ {
proxy_pass http://10.248.26.202/help; }
location ~^/lc/ {
proxy_pass http://localhost:8080; rewrite "^/lc(.*)$" $1 break;
}