前提：在我们的上一章里，我们搭建了对应的框架，这章我们来讲怎么运用。

 

---

 

如何开发

 

首先，我们需要更改后端nodejs的服务端口，因为默认情况下后端nodejs服务与前端nodejs服务用的端口都是3000。

 

1：打开src\server\bin\www.js文件

 

2：将其更改为4000端口，之后cmd窗口执行npm run start

 

3：启动web服务，在my-app这层执行语句npm run start，执行完以后前端若想发送http请求，则将请求端口改为4000就成啦。

 

---

 

React-Router运用

 

该篇React-Router运用为举例，详细用法自己根据项目更改即可。

 

1：首先让我们先执行以下语句，下载React-Router对应模块

　　npm install react-router --save-dev

　　npm install react-router-dom --save-dev

 

2：更改src\index.js文件

//src\index.jsimport React from 'react'import ReactDOM from 'react-dom';import { HashRouter, Route, Switch } from 'react-router-dom'import Test from './view/index'import App from './view/app'const SliderComponent = () => (  
         
          
        
      
     )ReactDOM.render((  
         
        
     ), document.getElementById('root'));

 

3：新建view目录，并添加app.js，index.js

//src\view\app.jsimport React, { Component } from 'react';import { Button } from 'antd';import '../App.css';class App extends Component {    handleClick(){        window.location.href = "/#/Test"    }  render() {    return (      
     
        
      Button11      
     
    );  }}export default App;

//src\view\index.jsimport React, { Component } from 'react';import { Button } from 'antd';import '../App.css';class App extends Component {    handleClick(){        window.location.href = "/"    }  render() {    return (      
     
        
      Button22      
     
    );  }}export default App;

 

 4:添加完以后，我们进网页查看，输入

 

5：点击按钮，我们发现跳转成功了

 

6：此时，我们将现有代码打包拷贝，确认代码在正式环境中也可用

 

7：第六步如果出错，请看这一步。这里我们先来讲一个中间件：connect-history-api-fallback，它用于SPA的页面索引，专门处理索引页面代理请求。在现有的SPA程序中，我们通常是只存在有一个html文件的，它就是index.html。当我们用JS语句跳转页面时，因为找不到对应路径的html文件，通常会爆出404的错误。

 

这个中间件解决了一些问题。 具体来说，它会将请求的位置更改为您指定的索引（默认为/index.html）。那么就让我们来用吧,我们在src\server\app.js里添加如下代码

//......const history = require('connect-history-api-fallback');app.use(history(  {    htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']  }));

 

之后我们再次回到web页面，发现这次跳转router成功了。