react-isomorphic-boilerplate icon indicating copy to clipboard operation
react-isomorphic-boilerplate copied to clipboard

想问下服务端渲染可以用 hashHistory 这种方式吗

Open hechuanhua opened this issue 7 years ago • 6 comments

开始项目是 hashHistory这种方式的,我试了下服务端渲染,但是只能渲染首页,其他路由页面的渲染不了,是不是必须改成 browserHistory?

hechuanhua avatar Mar 14 '17 08:03 hechuanhua

两种方案都是可行的,客户端和服务端的match都要传hashHistory

chikara-chan avatar Mar 14 '17 08:03 chikara-chan

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) sq4.1.0.0"><a href="#/" class="active" (server) sq4.1.0.0"><a href="/" class="active" 出现这样的问题 服务端代码: match({ routes:rootRoute, location: req.url }, (error, redirectLocation, renderProps) => { const html = renderToString( <Provider store={store} > <RouterContext {...renderProps} /> </Provider> ) const preloadedState = store.getState(); res.send(renderFullPage(html, preloadedState)); }) 客户端代码:render(( < Provider store = { store } > < Router history = { browserHistory } > {route} < /Router> < /Provider> ), document.getElementById("root"))

hechuanhua avatar Mar 14 '17 08:03 hechuanhua

请重启服务器

chikara-chan avatar Mar 14 '17 08:03 chikara-chan

不对,我的客户端代码是 : render(( < Provider store = { store } > < Router history = { hashHistory} > {route} < /Router> < /Provider> ), document.getElementById("root")) 我吧他改成 browserHistory 貌似就可以了,想问下如果是hashHistory这种方式怎么弄,重启都没用,貌似是服务端与客户端渲染出来的不一样,客户端渲染出来的多了个#;

还有如果我改成 browserHistory ,服务端是不是要定义2个端口?一个用来拦截所以的请求/*,一个用来请求真正的API,比如首页localhost会被localhost:2020拦截,返回html,但是里面的数据fetch请求实际到实际是localhost:3030,不然如果我fetch请求 localhost:2020的他都会返回html给我

hechuanhua avatar Mar 14 '17 08:03 hechuanhua

一个端口就可以了,合理使用koa的中间件参数next,匹配到API url请求API接口,匹配到hash路由交给客户端处理

chikara-chan avatar Mar 14 '17 08:03 chikara-chan

有没有示例, 因为APIurl没有在一个特定的url下面,全是在根目录下面的 比如 /aa,/bb,/cc等等 这个是API url地址 /dd,/ee等等 这个是browserHistory 路由地址 这样的情况怎么处理?先吧browserHistory 需要的路由写死在一个数组里面,然后获取req.url去匹配,匹配到就交给客户端处理,匹配不到就代表是API url,就去next()? react-retour有没有方法什么的,还是要自己去这样处理?

hechuanhua avatar Mar 21 '17 09:03 hechuanhua