Skip to content
New issue

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

关于css的同构 #6

Closed
1111mp opened this issue Oct 14, 2020 · 2 comments
Closed

关于css的同构 #6

1111mp opened this issue Oct 14, 2020 · 2 comments

Comments

@1111mp
Copy link

1111mp commented Oct 14, 2020

请教一下 有考虑使用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);

image
比如这里 点击了Baz 路由跳转了 但是页面没有重新render

请问能指教一下吗

@dxx
Copy link
Owner

dxx commented Nov 1, 2020

isomorphic-style-loader 这个我没有用过。

关于第一次 css 没有同构的问题,这个在 master 分支和 webpack4.x 分支解决了。主要原因是原来的分支用了 loadable-components 2.2.3,不支持提取访问路由组件的 css。后面 @loadable/component 提供了获取组件的 css api。renderer.js 中有获取组件 css 并放入 html 头部的代码。

@1111mp
Copy link
Author

1111mp commented Nov 3, 2020

使用@loadable/component其实是添加了link标签去preload对应的css文件 但是服务端dom string到web渲染的时候其实这部分资源是还没请求到的 所以还是会有css造成的闪烁的问题
我后来用isomorphic-style-loader解决了 谢谢啊 忘了关闭 不好意思
多谢 热更新那部分 真的强!谢谢谢谢~

@1111mp 1111mp closed this as completed Nov 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants