Javascript 不变冲突：元素类型无效：应为字符串或类，但得到：未定义。检查'MyApp'的呈现方法`

我正在尝试从meteor服务器端加载一个静态HTML，该服务器端也使用redux和router。但是，每次尝试使用renderToString（）呈现组件时，都会出现标题中指示的错误。我做错了什么

我已经尝试使用React.renderComponentToString作为可能的替代方法，但我得到的错误是React.renderComponentToString不是函数。否则我怎么才能通过辩论呢

import React from 'react';  
import {onPageLoad} from 'meteor/server-render';  
import {StaticRouter} from 'react-router';  
import {Provider} from 'react-redux';  
import {createStore, applyMiddleware} from 'redux';  
import {Helmet} from 'react-helmet';  
import rootReducer, {initialState} from '../redux/reducers';
import HomePage from '../ui/homepage/HomePage';

export default renderServerPage = onPageLoad(sink => {

  const context = {};
  const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

  const MyApp = props => {
    return (
      <Provider store={store}>
        <StaticRouter location={sink.request.url} context={context}>
          <Route path="/" component={HomePage}/>
        </StaticRouter>
      </Provider>
    );
  }

  // The following line is causing the error
  sink.renderIntoElementById('app', renderToString(<MyApp />));

  const helmet = Helmet.renderStatic();

  sink.appendToHead(helmet.title.toString(
    "Afterschools, Enrichment Programs, Growth, & Experiences - Fun2Bright"
  ));

  sink.appendToBody(
    <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
    </script>
  );
});

5） 对以下内容进行注释，看看是否是由我的其他导入组件引起的

<Route path="/" component={HomePage}/>

---

我终于找到了问题所在。事实证明，仅仅使用

react-router

不允许我使用和之类的DOM感知组件，因此我需要使用

react-router-DOM

。react-router dom还重新导出react-router的所有导出，因此我只需要使用

react-router dom

。我将所有内容更改为从“react router dom”导入：

import {Route, StaticRouter} from 'react-router-dom';
...
// inside onPageLoad
const App = props => {
    return (
      <Provider store={store}>
        <StaticRouter location={props.location} context={context}>
          <Route path="/" component={HomePage}/>
        </StaticRouter>
      </Provider>
    );
  }

sink.renderIntoElementById('app', renderToString(<App store={store} location={sink.request.url}/>));

从'react router dom'导入{Route，StaticRouter}；
...
//内载
const App=props=>{
返回(
);
}
sink.renderIntoElementById（'app'，renderString（
您的
MyApp
组件是在
renderServerPage
的范围内定义的。因此您需要在该范围/块内使用它，或者在该范围外定义它。是的，我在该范围外创建了一个组件，但仍然会遇到相同的错误。您可以发布您尝试的内容或设置一个codesandbox或其他内容吗？它可能是您的主页我会设置一个断点并调试tbh
sink.renderIntoElementById('app', renderToString(React.createElement(MyApp)));

<Route path="/" component={HomePage}/>

import {Route, StaticRouter} from 'react-router-dom';
...
// inside onPageLoad
const App = props => {
    return (
      <Provider store={store}>
        <StaticRouter location={props.location} context={context}>
          <Route path="/" component={HomePage}/>
        </StaticRouter>
      </Provider>
    );
  }

sink.renderIntoElementById('app', renderToString(<App store={store} location={sink.request.url}/>));