关于css的同构
1111mp opened this issue · 2 comments
1111mp commented
请教一下 有考虑使用isomorphic-style-loader来解决css造成的页面第一次加载的闪烁问题吗
我在你的这个demo的基础上 配置了isomorphic-style-loader
但是在App.jsx中 处理初始化的css的时候 会出现 页面点击路由跳转不会重新render的情况
import styles from "./assets/app.css";
import React from "react";
import {
Switch,
Redirect,
NavLink
} from "react-router-dom";
import { Helmet } from "react-helmet";
import { router, NestedRoute, StatusRoute} from "./router";
import withStyles from "isomorphic-style-loader/withStyles";
class App extends React.Component {
render() {
return (
<div>
<Helmet>
<title>This is App page</title>
<meta name="keywords" content="React SSR"></meta>
</Helmet>
<div className="title">This is a react ssr demo</div>
<ul className="nav">
<li><NavLink to="/bar">Bar</NavLink></li>
<li><NavLink to="/baz">Baz</NavLink></li>
<li><NavLink to="/foo">Foo</NavLink></li>
<li><NavLink to="/top-list">TopList</NavLink></li>
</ul>
<div className="view">
<Switch>
{
router.map((route, i) =>
<NestedRoute key={i} {...route}/>
)
}
<Redirect from="/" to="/bar" exact/>
<StatusRoute code={404}>
<div>
<h1>Not Found</h1>
</div>
</StatusRoute>
{/*<Route path="/bar" component={Bar} />
<Route path="/baz" component={Baz} />
<Route path="/foo" component={Foo} />
<Route path="/top-list" component={TopList} />
<Redirect from="/" to="/bar" exact />
*/}
</Switch>
</div>
</div>
);
}
}
export default withStyles(styles)(App);
比如这里 点击了Baz 路由跳转了 但是页面没有重新render
请问能指教一下吗
dxx commented
isomorphic-style-loader 这个我没有用过。
关于第一次 css 没有同构的问题,这个在 master
分支和 webpack4.x
分支解决了。主要原因是原来的分支用了 loadable-components
2.2.3,不支持提取访问路由组件的 css。后面 @loadable/component
提供了获取组件的 css api。renderer.js
中有获取组件 css 并放入 html 头部的代码。
1111mp commented
使用@loadable/component其实是添加了link标签去preload对应的css文件 但是服务端dom string到web渲染的时候其实这部分资源是还没请求到的 所以还是会有css造成的闪烁的问题
我后来用isomorphic-style-loader解决了 谢谢啊 忘了关闭 不好意思
多谢 热更新那部分 真的强!谢谢谢谢~