代码之家 › 专栏 › 技术社区 › Jee Mok ecanf

React cookie:不变冲突:根路由必须呈现单个元素

react-cookie react-router reactjs

0

Jee Mok ecanf · 技术社区 · 7 年前

我在用 react-cookie 软件包,当我试图在最高级别组件上设置它时,它会抛出以下错误:

反应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>
);

//登录页面(像这样放置不起作用)

@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,
  }
  ...

但是,如果我将它移动到另一个组件中并导入它,它就会工作。

//登录页面

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);

有没有办法在最高级别的组件中进行设置?

//服务器。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}`);

0 回复 | 直到 6 年前

1

0

Gaël S 7 年前

下列的 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 有什么原因吗?