Нарушение инварианта: недопустимый тип элемента: ожидается строка или класс, но получено: undefined. Проверьте метод рендеринга MyApp - PullRequest
Новая
       45

Нарушение инварианта: недопустимый тип элемента: ожидается строка или класс, но получено: undefined. Проверьте метод рендеринга MyApp

1 голос
/ 03 июля 2019

Я пытаюсь загрузить статический 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>
  );
});

Другие мои попытки включают в себя следующее: 1) создание компонента вне области действия в том же файле и передача store и sink.request.url в качестве реквизита

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

2) создание в основном того же компонента, но в другом файле и импорт компонента.

3) непосредственное размещение элемента внутри renderToString: 

sink.renderIntoElementById('app', renderToString(
    <Provider store={store}>
      <StaticRouter location={sink.request.url} context={context}>
        <Route path="/" component={HomePage}/>
      </StaticRouter>
    </Provider>
));

4) использование React.createElement без передачи каких-либо реквизитов: 

sink.renderIntoElementById('app', renderToString(React.createElement(MyApp)));

5) комментирование следующего, чтобы посмотреть, вызвано ли оно каким-либо из моих других импортированных компонентов 

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

1 Ответ

1 голос
/ 03 июля 2019

Я наконец понял проблему. Оказывается, что простое использование react-router не позволяет мне использовать компоненты, поддерживающие DOM, такие как и, поэтому мне нужно было вместо этого использовать react-router-dom. response-router-dom также реэкспортирует все экспорты реагирующего маршрутизатора, поэтому мне нужно будет только когда-либо использовать react-router-dom. Я изменил все, что нужно импортировать из'act-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}/>));

Я нашел это отсюда: https://github.com/ReactTraining/react-router/issues/4648

...