跟着做react项目 Redux（P137至P141）

前台404组件

这种标签还没用过，说明html ， css了解太浅了

<Row className='not-found'>
  <Col span={12} className='left'></Col>
  <Col span={12} className='right'>
    <h1>404</h1>
    <h2>抱歉，你访问的页面不存在</h2>
    <div>
      <Button type='primary' onClick={this.goHome}>
        回到首页
      </Button>
    </div>
  </Col>
</Row>

路由改成，当请求路径匹配不到正常组件时，就匹配前台404组件

<Switch>
	<Redirect exact from='/' to='/home'/>
	<Route path='/home' component={Home}/>
	<Route path='/category' component={Category}/>
	<Route path='/product' component={Product}/>
	<Route component={NotFound}/> {/*上面没有一个匹配, 直接显示*/}
</Switch>

< HashRouter>的问题

< HashRouter >不能传对象过去，只能携带字符串

办法：像user信息一样，存储在memoryUtils.js 内存里面

/*
显示商品详情界面
 */
showDetail = (procut) => {
  // 缓存product对象 ==> 给detail组件使用
  memoryUtils.product = procut
  this.props.history.push('/product/detail')
}

存储商品的界面退出之前，要清空内存。不然就永远是修改商品界面，而不是添加商品界面。

    // 保存是否是更新的标识
    this.isUpdate = !!product._id
    // 保存商品(如果没有, 保存是{})
    this.product = product || {}

  /*
 在卸载之前清除保存的数据
 */
  componentWillUnmount () {
    memoryUtils.product = {}
  }

合并到服务端项目一起运行

npm run build生成build文件，将文件里面的内容迁移到后台服务器的public文件夹。后台服务器的端口为5000，访问根地址，默认是在public里面找。

但此时要分清前台路由和后台路由

后台路由此时增加一个根路径，即从/api + 路径。

与服务器端项目独立运行

nginx做集群，但是也有代理服务的功能

nginx-1.15.2\conf\nginx.conf

生产环境中 BrowserRouter 的问题

因为使用< HashRouter> 路径是http://localhost:5000/#/home
不会携带给后台，总是请求项目的根路径，即public文件夹下的index.html。

而< BrowserRouter >路径是http://localhost:5000/home，后台收到该请求，作为后台路由处理。

---

开发环境不报错是因为：虽然请求路径确实是3000/home，但是开发环境给我们总是首页index.html。

---

方法：所有后台路由都没有匹配到当前请求路径5000/home时，我们增加一个后台路由：

注意: 前端路由的路径不要与后台路由路径相同(并且请求方式也相同)