React Navbar Error: Element type is invalid:

Question

我正在尝试创建一个带有切换元素的 react-bootstrap 导航栏（这将是一个 chart.js 元素，但目前只是一个占位符图像。

出于某种原因，我在页面加载时遇到导出错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Routing`.
▶ 22 stack frames were collapsed.
Module.<anonymous>
C:/Users/matth/watermapper/src/index.js:7
   4 | import App from './App';
   5 | import 'leaflet/dist/leaflet.css';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

这里是Routing的内容：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import { Navbar, Nav, NavItem, NavDropdown } from 'react-bootstrap';
import Home from './Home.js';
import Page from './Page.js';

import dummyChart from './img/basic-bar-graph.png';


export default function Routing(props) {
    return (
        <Router>
            <div>
            <Navbar inverse collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                        <a href="#brand">Portland Water Usage Data Dashboard</a>
                        </Navbar.Brand>
                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav>
                        <NavItem>
                            <Link to="/">Home</Link>
                        </NavItem>
                        <NavItem>
                            <Link to="/page">ReadMe</Link>
                        </NavItem>
                        </Nav>
                        <Nav pullRight>
                            <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                                <div className="chart">
                                    <img src={dummyChart} alt="graph"></img>
                                </div>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>;  
                            
                {/* Switches */}
                <Switch>
                    <Route path="/home">
                        <Home />
                    </Route>
                    <Route path="/page">
                        <Page />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}

Answer 1

你有无效的html:

<img src={dummyChart} alt="graph"></img>

img 标签应该自动关闭：

<img src={dummyChart} alt="graph" />

现在，解决你的问题。我已将您的代码应用到我的本地项目中，但出现了与您相同的错误。所以，调试之后，我发现问题出在<Navbar.Header>。已从 react-bootstrap

中删除

因此，只需从您的组件中删除 <Navbar.Header /> 并使用 <Navbar.Brand /> 即可。

React Navbar Error: Element type is invalid:

React Navbar Error: Element type is invalid:

nav

reactjs

react-bootstrap