1 react脚手架配置代理

方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二

1. 第一步：创建代理配置文件

   在src下创建配置文件：src/setupProxy.js

2. 编写setupProxy.js配置具体代理规则：

   const proxy = require('http-proxy-middleware')

   module.exports = function(app) {
     app.use(
       proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
         target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true, //控制服务器接收到的请求头中host字段的值
         /*
                 changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
                 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
                 changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
       }),
       proxy('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

2 路由基本使用

1. 明确好界面中的导航区、展示区
2. 导航区的a标签改为Link标签
3. 展示区写Route标签进行路径的匹配
4. 的最外侧包裹了一个或

3 Switch的使用

• 通常情况下，path和component是一一对应的关系
• Switch可以提高路由匹配效率(单一匹配)

4 Redirect的使用

1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

2.具体编码：

<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>

5 嵌套路由

• 注册子路由时要写上父路由的path值
• 路由的匹配是按照注册路由的顺序进行的

6 BrowserRouter与HashRouter的区别

1. 底层原理不一样：
   • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
   • HashRouter使用的是URL的哈希值。
2. path表现形式不一样
   • BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
   • HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3. 刷新后对路由state参数的影响
   • BrowserRouter没有任何影响，因为state保存在history对象中。
   • HashRouter刷新后会导致路由state参数的丢失！！！

备注：HashRouter可以用于解决一些路径错误相关的问题。