TypeError:element.type.toLowerCase不是函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeError:element.type.toLowerCase不是函数相关的知识,希望对你有一定的参考价值。

我在为反应应用程序设置SSR时遇到问题。渲染的服务器端代码如下:

    app.use((req, res) => {
    const context = {}

    const body = ReactDOMServer.renderToString(
        React.createElement(
            Provider, { store },
            React.createElement(
                StaticRouter, { location: req.url, context: context },
                React.createElement(Layout, null, React.createElement(Routes))
            )
        )
    )
    if (context.url) {
        res.redirect(context.url)
    } else {
        res.status(200).send(template({ body }))
    }
})

路由配置如下:Routes.js

const Routes = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home}/>
      <Route path="*" component={NotFound}/>
    </Switch>
  )
}

    export default Routes

App.js

const App = () => {  
    return (
      <Provider store={store}>
        <BrowserRouter>
        <Layout>
              {router}
        </Layout>
        </BrowserRouter>
    </Provider>
    );
}

export default App

抛出以下错误:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
TypeError: element.type.toLowerCase is not a function
    at ReactDOMServerRenderer.renderDOM (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2304:28)
    at ReactDOMServerRenderer.render (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2298:21)
    at ReactDOMServerRenderer.read (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at Object.renderToString (../node_modules/react-dom/cjs/react-dom-server.node.development.js:2501:25)
    at app.use (../server.js:59:33)

当我尝试打印console.log(React.createElement(Routes));时,它显示如下:

{ '$$typeof': Symbol(react.element),
  type: [Function: Routes],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {} }

我使用babel从Routes文件创建了CompiledRoutes文件,我将其导入server.js,如下所示:

const Routes = require('./client/CRoutes').default

有人可以指导我这里有什么问题吗?先谢谢。

答案

尝试改变

React.createElement(Layout, null, React.createElement(Routes))

React.createElement(Layout, null, React.createElement(Routes.default))

您可能在服务器端使用require而不是import,这会导致一些差异。

以上是关于TypeError:element.type.toLowerCase不是函数的主要内容,如果未能解决你的问题,请参考以下文章

反应本机获取多标记[未处理的承诺拒绝:TypeError:TypeError:未定义不是对象(评估'this.state.markers.map

Django TypeError - TypeError: issubclass() arg 1 必须是一个类

pyspark:TypeError:'float'对象不可迭代

Python 3.8 TypeError: can't concat str to bytes - TypeError: a bytes-like object is required, not 's

TypeError: key 必须是一个字符串,一个缓冲区或一个对象在 typeError 与 GCP 文件存在

TypeError: jQueryxxxxxx 不是函数