时间戳

首页 > 解决方案 > index.js 中的 ReactDOM.render 不会呈现我的应用程序，而是会引发此错误：

javascript - index.js 中的 ReactDOM.render 不会呈现我的应用程序，而是会引发此错误：

问题描述

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查Context.Consumer.

但问题是我没有在我的应用程序中使用 Context，并且 Visual Studio 的控制台没有读取任何错误。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import App from './Components/App.js';

const container = document.getElementById('root')

ReactDOM.render(<App />, container)

应用程序.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Inicio from '../Pages/Inicio.js'
import Adopcion from '../Pages/Adopcion.js'
import NotFound from '../Components/NotFound.js'

const App = () => (
  <BrowserRouter>
        <Switch>
            <Route exact path='/inicio' component={<Inicio />}/>
            <Route exact path='/inicio/adoptar' component={<Adopcion />}/>
            <Route component={NotFound} />
        </Switch>
 </BrowserRouter>
)

export default App;

我花了整个下午阅读有关 Context 的内容，回到 React 文档，但我不知道如何告诉 React 渲染我的应用程序。谢谢你的回答。

标签： javascriptreactjs

解决方案

您的错误在于您的路线声明，特别是：

 component={<Inicio />}

和

 component={<Adopcion />}

您在那里所做的是创建实例，即对象，Inicio并将Adopcion这些对象作为component道具传递给路线。正如错误消息所说，它需要一个函数/类，因此您需要传递实际组件，就像您对NotFound路由所做的那样：

        <Route exact path='/inicio' component={Inicio}/>
        <Route exact path='/inicio/adoptar' component={Adopcion}/>
        <Route component={NotFound} />

错误消息提到的原因Context.Consumer是因为 react-router 在内部使用它来渲染您的组件，并且 react-router 不会验证您传入的内容，它只是通过它。

推荐阅读