zoukankan      html  css  js  c++  java
  • react服务端渲染(十)404&&301页面实现

    1. 服务端发送请求 fetch如何携带cookie?
      fetch(url,{
           headers: {
               'Cookie': req.get('Cookie') || ''
           }
      })

      改写我们的服务端store,在创建的时候传入服务端的req参数,再改写服务端的fetch方法接受req参数

      export const getServerStore = (req) => {
          return createStore(reducer,applyMiddleware(thunk.withExtraArgument(fetchServer(req))))
      }
    2. 页面不存在服务端如何返回状态码404?
      //服务端代码
      <Provider store={Store}> <StaticRouter context={context} location={req.path}> { renderRoutes(Routers) } </StaticRouter> </Provider> console.log(context); //404页面 context.notFound&&res.status(404); //404组件代码 const NotFound = (props) => { props.staticContext&&(props.staticContext.notFound = true); return (<div>not found</div>) }

      staticRouter提供一个全局的context参数,组件使用props.staticContext可以获取这个变量。那么我们就可以通过自定义context的一些变量(notFound)来代表页面是否匹配到。

    3. 301页面如何实现?
      context.action==='REPLACE'&&res.status(301);

      很简单,staticRouter的context会在我们页面重定向之后定义一些变量,其中提供一个action参数,代表是否重定向

    4. promise改写 请求接口错误发生时 每个promise单独catch错误

    项目地址:git@github.com:longlongdan/Reactssr.git

  • 相关阅读:
    sql去重复
    验证 decimal 和 数字
    OleDbConnection读取Excel
    排班知识点
    sql基础
    SQL Server 获取月份的具体天数
    2016 Excel 展示 Sqlserver数据并制作图表
    SQL Server跨域查询
    SqlSugar中CASE WHEN的用法
    Microsoft.AspNetCore.Mvc.Versioning学习笔记
  • 原文地址:https://www.cnblogs.com/longlongdan/p/11348158.html
Copyright © 2011-2022 走看看