Error: Element type is invalid when using react-router-bootstrap LinkContainer

Question

从 react-router-bootstrap 使用 LinkContainer 给我这个错误：

错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：对象。

检查 Header 的渲染方法。

       import React, { Component } from 'react'
        import { Navbar, Nav, Container} from 'react-bootstrap'
        import {LinkContainer}  from 'react-router-bootstrap'
    
    
    class Header extends Component {
     
     render(){
      return (
      <header>
        <Navbar bg="dark" expand="lg" variant="dark" collapseOnSelect>
          <Container>
            <LinkContainer to="/">
            <Navbar.Brand >MyShop</Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">     
              <Nav className="mr-auto">
                <LinkContainer to="/cart">
                  <Nav.Link ><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/login">
                  <Nav.Link ><i className="fas fa-user"></i>Login</Nav.Link>    
                [enter image description here][1]</LinkContainer>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </header>
     )
     }
    }
    
    export default Header

这里是 App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import Header from "./components/Header"
import Footer from "./components/Footer"

import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'

function App() {
  return (
    <Router >
      <Header/>
        <main className="py-3">
          <Container>
            <Routes>
              <Route path='/' element={<HomeScreen/>} exact/>
              <Route path="/product/:id" element={<ProductScreen/>}/>
            </Routes>
          </Container>
        </main>
      <Footer/>
    </Router>
  );
}

export default App;

index.js

import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我在此处添加了错误消息屏幕截图

Error message screeshot

谢谢！

Answer 1

请在您的 index.js 代码顶部添加这行代码：

import React from "react";

Error: Element type is invalid when using react-router-bootstrap LinkContainer

Error: Element type is invalid when using react-router-bootstrap LinkContainer

reactjs

react-router

react-router-bootstrap