We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
请教一下 有考虑使用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
请问能指教一下吗
The text was updated successfully, but these errors were encountered:
isomorphic-style-loader 这个我没有用过。
关于第一次 css 没有同构的问题,这个在 master 分支和 webpack4.x 分支解决了。主要原因是原来的分支用了 loadable-components 2.2.3,不支持提取访问路由组件的 css。后面 @loadable/component 提供了获取组件的 css api。renderer.js 中有获取组件 css 并放入 html 头部的代码。
master
webpack4.x
loadable-components
@loadable/component
renderer.js
Sorry, something went wrong.
使用@loadable/component其实是添加了link标签去preload对应的css文件 但是服务端dom string到web渲染的时候其实这部分资源是还没请求到的 所以还是会有css造成的闪烁的问题 我后来用isomorphic-style-loader解决了 谢谢啊 忘了关闭 不好意思 多谢 热更新那部分 真的强!谢谢谢谢~
No branches or pull requests
请教一下 有考虑使用isomorphic-style-loader来解决css造成的页面第一次加载的闪烁问题吗
我在你的这个demo的基础上 配置了isomorphic-style-loader
但是在App.jsx中 处理初始化的css的时候 会出现 页面点击路由跳转不会重新render的情况
比如这里 点击了Baz 路由跳转了 但是页面没有重新render
请问能指教一下吗
The text was updated successfully, but these errors were encountered: