ReactApp：错误：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象 [重复]

Posted 2023-02-21

【中文标题】ReactApp：错误：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象 [重复]

【英文标题】：ReactApp :Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object [duplicate]

【发布时间】：2021-06-07 05:35:12

【问题描述】：

我收到此错误：

未捕获的错误：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象 检查PageWrapper的渲染方法。

这是我的 App.js

import React from 'react';
import PageWrapper from "./components/PageWrapper";
import Home from "./components/Pages/Home.js";
import BrowserRouter as Router,Route,Link from 'react-router-dom';
function App() 
  return (
    <div>
    
    <Router>
      <PageWrapper>
          
            <Route path="/"
            component=Home
            ></Route>
        
        </PageWrapper>
      </Router>
      </div>
  );


export default App;

这是我的 PageWrapper：

import React from 'react';
import Link from 'react';

class PageWrapper extends React.Component

        render()

            return(
               <div>
                <nav className="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
                    <div className="container">
                        <Link className="navbar-brand js-scroll-trigger" to="/"><img src="assets/img/navbar-logo.svg"  /></Link>
                        <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                            Menu
                            <i className="fas fa-bars ml-1"></i>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarResponsive">
                            <ul className="navbar-nav text-uppercase ml-auto">
                                <li className="nav-item"><Link className="nav-link js-scroll-trigger" to="/services">Services</Link></li>
                                <li className="nav-item"><Link className="nav-link js-scroll-trigger" to="/portfolio">Portfolio</Link></li>
                                <li className="nav-item"><Link className="nav-link js-scroll-trigger" to="/about">About</Link></li>
                                <li className="nav-item"><Link className="nav-link js-scroll-trigger" to="/team">Team</Link></li>
                                <li className="nav-item"><Link className="nav-link js-scroll-trigger" to="/contact">Contact</Link></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                this.props.children
               </div> 
                );
        



export default PageWrapper;

请帮忙！

【问题讨论】：

可以分享一下首页的内容吗？问题可能是您没有默认导出Home。

【参考方案1】：

你的问题是

import Link from 'react';

在PageWrapper 组件中

它应该是一个命名的导入，它应该来自"react-router-dom" 而不是"React"

所以改成

import Link from 'react-router-dom';

它会正常工作的。