Question

我使用的是react-cookie软件包，当我尝试在最高级别的组件上进行设置时，会抛出以下错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：符号。

永久违反：根路由必须呈现单个元素

[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}`);

Answer 1

在服务器端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，是有原因的吗？

React-cookie：永久违反：根路由必须呈现单个元素

1 个答案: