React-cookie: нарушение инварианта: корневой маршрут должен отображать один элемент - PullRequest
Новая
       20

React-cookie: нарушение инварианта: корневой маршрут должен отображать один элемент

0 голосов
/ 30 апреля 2019

Я использую response-cookie пакет, когда я пытаюсь установить его на компоненте самого высокого уровня, он выдаст мне следующие ошибки:

React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: symbol.

Нарушение инварианта: корневой маршрут должен отображать один элемент 

[1] Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.
[1]     in RouterContext
[1]     in AsyncConnect
[1]     in Connect(AsyncConnect)
[1]     in IntlProvider
[1]     in Connect(IntlProvider)
[1]     in Provider
[1]     in Context.Provider
[1]     in CookiesProvider
[1]     in StyleSheetManager
[1] C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:47
[1]             throw err;
[1]             ^
[1] Invariant Violation: The root route must render a single element
[1]     at invariant (C:\Users\me\Projects\my-application\node_modules\invariant\invariant.js:40:15)
[1]     at Object.render (C:\Users\me\Projects\my-application\node_modules\react-router\lib\RouterContext.js:125:155)
[1]     at processChild (C:\Users\me\Projects\htmmy-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)
[1]     at resolve (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
[1]     at ReactDOMServerRenderer.read (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
[1]     at Object.renderToString (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
[1]     at Html.render (C:/Users/me/Projects/my-application/src/helpers/Html.js:29:42)
[1]     at Html.tryRender (C:\Users\me\Projects\my-application\node_modules\react-transform-catch-errors\lib\index.js:34:31)
[1]     at processChild (C:\Users\me\Projects\my-application\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18)

// Маршруты 

export default () => (
  <Route path="/:locale/" component={App}>
    ...
    <Route path="login" component={Login} />
  </Route>
);

// LoginPage (ставить как это не работает) 

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class LoginPage extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

Однако, если я перенесу его в другой компонент и импортирую, он будет работать.

// LoginPage 

export default class LoginPage extends PureComponent {
  render() {
    return (
      <div>
        <Login />
      </div>
    );
  }
}

// Логин 

@withCookies
@connect(state => ({ auth: state.auth }), { login })
export default class Login extends PureComponent {
  static propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
    auth: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
  }
  ...

Я пытался экспортировать по-разному, но все равно получала ту же ошибку: 

export class LoginPage extends PureComponent {
  ...
}

const App = connect(state => ({ auth: state.auth }), { login })(LoginPage);

export default withCookies(App);

Есть ли способ настроить компонент самого высокого уровня?

Дополнительная информация:

// server.js 

    const component = (
      <CookiesProvider cookies={req.universalCookies}>
        <Provider store={store} key="provider">
          <IntlProvider>
            <ReduxAsyncConnect {...renderProps} />
          </IntlProvider>
        </Provider>
      </CookiesProvider>
    );

    const html = ReactDOM.renderToString(
      <Html assets={webpackIsomorphicTools.assets()} component={component} store={store} />
    );
    res.status(200);
    res.send(`<!doctype html>\n${html}`);

1 Ответ

0 голосов
/ 30 апреля 2019

После react-cookies на стороне сервера код из примера выглядит следующим образом: 

// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';

import Html from './components/Html';
import App from './components/App';

export default function middleware(req, res) {
  const markup = ReactDOMServer.renderToString(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );

  const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);

  res.send('<!DOCTYPE html>' + html);
}

Не знаю, связано ли это, но вы не используете ReactDOMServer, но ReactDOM, есть липричина?

...