前台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时,我们增加一个后台路由:
注意: 前端路由的路径不要与后台路由路径相同(并且请求方式也相同)