框架篇：React+ReactRouter+antd+nodejs+express框架开发运用（nodejs做前后端server）...

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

如何开发

首先，我们需要更改后端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 &＃8211;save-dev

　　npm install react-router-dom &＃8211;save-dev

2：更改src\index.js文件

//src\index.js

import 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.js

import React, { Component } from 'react';
import { Button } from 'antd';
import '../App.css';
class App extends Component {
handleClick(){
window.location.href = "/#/Test"
}
render() {
return (

//src\view\index.js

import React, { Component } from 'react';
import { Button } from 'antd';
import '../App.css';
class App extends Component {
handleClick(){
window.location.href = "/"
}
render() {
return (

 4:添加完以后，我们进网页查看，输入http://localhost:3000/#/

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成功了。

转:https://www.cnblogs.com/tianshu/p/11111326.html