如何解决反应导航栏错误:元素类型无效:
我正在尝试创建一个带有切换元素的 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>
)
}
解决方法
您的 html 无效:
<img src={dummyChart} alt="graph"></img>
img
标签应该是自闭合的:
<img src={dummyChart} alt="graph" />
现在,解决您的问题。我已将您的代码应用到我的本地项目中,但遇到了与您相同的错误。所以,在调试之后,我发现问题出在<Navbar.Header>
上。已从 react-bootstrap
因此,只需从您的组件中删除 <Navbar.Header />
,然后使用 <Navbar.Brand />
就可以了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。