react服务端渲染(十)404&&301页面实现
- 服务端发送请求 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)))) }
- 页面不存在服务端如何返回状态码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)来代表页面是否匹配到。
- 301页面如何实现?
context.action==='REPLACE'&&res.status(301);
很简单,staticRouter的context会在我们页面重定向之后定义一些变量,其中提供一个action参数,代表是否重定向
- promise改写 请求接口错误发生时 每个promise单独catch错误
项目地址:git@github.com:longlongdan/Reactssr.git