当连接到存储时,React通用组件会引发错误

时间:2018-08-22 18:12:54

标签: serverside-rendering code-splitting ssr react-universal code-splitting-async

尝试访问/article/post...时发生错误。这是Routes.js的代码段,据推测该错误发生了。完整的错误堆栈跟踪位于https://pastebin.com/M0pCULPj上,完整的存储库位于https://github.com/ElAnonimo/webpack4_2上。 Article.js缺少什么才能正确渲染?

Routes.js

import React from 'react';
import { Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
import universal from 'react-universal-component';
import NotFound from './NotFound';

const UniversalComponent = universal(props => import(`./${props.page}`));

export default () => <div>
  <div className="nav">
    <Link to='/about'>About</Link>
    <Link to='/'>Gallery</Link>
    <Link to='/article/post'>Article 1</Link>
    <Link to='/article/post2'>Article 2</Link>
  </div>
  <Switch>
    <Route path='/about' render={({ staticContext }) => {
      const site = staticContext ? staticContext.site : location.hostname.split('.')[0];
      return <UniversalComponent page='About' site={site} />}}
    />
    <Route exact path='/'>
      <UniversalComponent page='Gallery' />
    </Route>
    <Route path='/article/:slug' render={({ staticContext, match }) => {
      const site = staticContext ? staticContext.site : location.hostname.split('.')[0];
      return <UniversalComponent page='Article' site={site} match={match} />}}
    />
    <Route component={NotFound} />
  </Switch>
</div>

Article.js

import React from 'react';
import { connect } from 'react-redux';
import '../css/Article.scss';
import NotFound from './NotFound';
import { fetchArticle } from '../server/actions';

class Article extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.props.dispatch(fetchArticle(this.props.site, this.props.match.params.slug));
  }

  render() {
    const siteConfig = require(`../../data/${this.props.site}/siteConfig`);
    try {
      const imagePath = require(`../images/${siteConfig.aboutImage}`);
      require(`../css/${this.props.site}/theme.scss`);

      return (
        <div className='article'>
          <h1>{ this.props.title }</h1>
          <div className="content" dangerouslySetInnerHTML={{__html: this.props.__content}} />
        </div>
      );
    } catch(ex) {
      return <NotFound />
    }
  }
}

export default connect((state) => ({
  title: state.text,
  __content: state.content
}))(Article);

0 个答案:

没有答案