Javascript React.js组件在刷新时缺少样式
我正在使用React与React路由器和材质ui。在第一次加载时，所有内容看起来都是正确的，但当我刷新页面时，所有样式都会丢失 如果我更改代码中的某些内容并重新编译，则会正确地重新加载样式 刷新时： 初始负载时： 下面是服务器端渲染Javascript React.js组件在刷新时缺少样式,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我正在使用React与React路由器和材质ui。在第一次加载时，所有内容看起来都是正确的，但当我刷新页面时，所有样式都会丢失 如果我更改代码中的某些内容并重新编译，则会正确地重新加载样式 刷新时： 初始负载时： 下面是服务器端渲染 const generateClassName = createGenerateClassName() const context = {} const markup = ReactDOMServer.renderToString( <
const generateClassName = createGenerateClassName()
const context = {}
const markup = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme} sheetsManager={new Map()}>
<MainRouter/>
</MuiThemeProvider>
</JssProvider>
</StaticRouter>
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheetsRegistry.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
const generateClassName=createGenerateClassName（）
常量上下文={}
const markup=ReactDOMServer.renderToString(
)
if（context.url）{
return res.redirect（303，context.url）
}
const css=sheetsRegistry.toString（）
资源状态（200）。发送（模板({
标记：标记，
css:css
}))
})
export default ({markup, css}) => {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Budget App</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
a{
text-decoration: none
}
</style>
</head>
<body style="margin:0">
<div id="root">${markup}</div>
<style id="jss-server-side">${css}</style>
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>`
}
导出默认值（{markup，css}）=>{
返回`
预算应用程序
a{
文本装饰：无
}
${markup}
${css}
`
}
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core'
import {list} from './api-cat.js'
import auth from '../auth/auth-helper'
import AddCat from './AddCat'
import Category from './Category.js'
import Paper from '@material-ui/core/Paper'
import Typography from '@material-ui/core/Typography'
import Grid from '@material-ui/core/Grid'
import Divider from '@material-ui/core/Divider'
import { Chart } from "react-google-charts"
const pieOptions = {
title: "",
legend: {
position: "bottom",
alignment: "center",
},
tooltip: {
showColorCode: true
},
chartArea: {
left: 0,
top: 50,
width: "100%",
height: "80%"
},
fontName: "Roboto"
}
const styles = theme => ({
root: theme.mixins.gutters({
maxWidth: 600,
margin: 'auto',
padding: theme.spacing.unit * 3,
marginTop: theme.spacing.unit * 5
}),
title: {
margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
color: theme.palette.protectedTitle
}
})
class ListCat extends Component {
state = {
cats: [],
chartImageURI: "",
}
componentDidMount() {
this.initCats()
}
initCats = () => {
const jwt = auth.isAuthenticated()
list({t: jwt.token}).then((data) => {
if (data.error) {
console.log(data.error)
} else {
this.setState({cats: data})
}
})
}
handleChange = () => {
this.initCats()
}
render() {
const {classes} = this.props
const {cats} = this.state
const catGraph = cats.map((cat) => {
return [cat.name, cat.budget]
})
catGraph.unshift(["Name", "Budget"])
const budget = this.state.cats.map((data)=> {
return (data.budget)
}).reduce(( accumulator, currentValue ) => accumulator + currentValue, 0)
return(
<Paper className={classes.root} elevation={4}>
<Typography type='title' className={classes.title}>
All Categories
</Typography>
<AddCat onClick={this.handleChange}/>
<Grid container spacing={24}>
{cats.map((cat, i) => {
return (
<Category key={i} category={cat} onClick={this.handleChange}/>
)
})}
</Grid>
<Paper className={classes.root}>
<Typography type='title' className={classes.title}>
Spending chart (${budget} per month)
</Typography>
<Chart
chartType="PieChart"
data={catGraph}
options={pieOptions}
graph_id="PieChart"
width={"100%"}
height={"400px"}
legend_toggle
/>
</Paper>
</Paper>
)
}
}
ListCat.PropTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(ListCat)
import React，{Component}来自“React”
从“道具类型”导入道具类型
从'@material ui/core'导入{withStyles}
从“/api cat.js”导入{list}
从“../auth/auth helper”导入身份验证
从“./AddCat”导入AddCat
从“./Category.js”导入类别
从“@material ui/core/Paper”导入纸张
从“@material ui/core/Typography”导入排版
从“@material ui/core/Grid”导入网格
从“@material ui/core/Divider”导入分隔器
从“反应谷歌图表”导入{Chart}
常量选项={
标题：“，
图例：{
位置：“底部”，
对齐：“中心”，
},
工具提示：{
showColorCode：true
},
图表区：{
左:0,，
前50名，
宽度：“100%”，
身高：“80%”
},
fontName：“机器人”
}
常量样式=主题=>({
根：theme.mixins.gutters({
最大宽度：600，
页边空白：“自动”，
填充：theme.space.unit*3，
marginTop:theme.space.unit*5
}),
标题：{
边距：`${theme.spating.unit*3}px 0${theme.spating.unit*2}px`，
颜色：theme.palette.protectedTitle
}
})
类ListCat扩展组件{
状态={
猫：[]，
chartImageURI:“”，
}
componentDidMount（）{
这个.initCats（）
}
initCats=（）=>{
const jwt=auth.isAuthenticated（）
列表（{t:jwt.token}）。然后（（数据）=>{
if（data.error）{
console.log（data.error）
}否则{
this.setState（{cats:data}）
}
})
}
handleChange=（）=>{
这个.initCats（）
}
render（）{
const{classes}=this.props
const{cats}=this.state
常量catGraph=cats.map（（cat）=>{
返回[类别名称，类别预算]
})
catGraph.unshift（[“名称”，“预算”]）
const budget=this.state.cats.map（（数据）=>{
返回（数据.预算）
}).减少（（累加器，当前值）=>累加器+当前值，0）
返回(
所有类别
{cats.map（（cat，i）=>{
返回(
)
})}
支出表（每月${budget}）
)
}
}
ListCat.PropTypes={
类：PropTypes.object.isRequired
}
导出默认样式（样式）（ListCat）