Question

我正在尝试将我的 NavigationBar 组件导入我的 React 应用程序。

我的 NavigationBar.js：

/* eslint-disable react/jsx-pascal-case */

import React from 'react';

import {Nav, Navbar} from 'react-bootstrap';
import styled from 'styled-components';

const Styles = styled.div`
.navbar {
    background-color: #222;

}

a, .navbar-brand, .navbar-nav, .nav-link {
    color: #bbb;

    &:hover { color:white 
}
}


`;

export const NavigationBar = () => (

    <Styles>
        <Navbar expand="lg">
            <Navbar.Brand href="/">Code Life</Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav"/>
           <Navbar.Collapse id="basic-navbar-nav"> 
           <Nav className="ml-auto">
               <Nav.item><Nav.link href="/">Home</Nav.link></Nav.item>
               <Nav.item><Nav.link href="/About">Home</Nav.link></Nav.item>
               <Nav.item><Nav.link href="/Contact">Contact</Nav.link></Nav.item>
           </Nav>
           
           </Navbar.Collapse>

        </Navbar>
    </Styles>

)

我的 App.js 文件


/* eslint-disable react/jsx-pascal-case */

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {Home} from './Home';
import {About} from './About';
import {Contact} from './Contact';
import {NoMatch} from './NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar'

 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        <NavigationBar />
        <Layout>
        <Router>
         
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route component={NoMatch} />
            </Switch>
        
        </Router>
        </Layout>
      </React.Fragment>
    );
  }
}

export default App;

尝试在浏览器中访问我的 React 项目时出现以下错误。

<块引用>

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 NavigationBar 的渲染方法。

我到底需要检查什么？ NavigationBar.js 中没有 render 方法

错误：元素类型无效：应为字符串（对于内置组件）或类/函数.. 检查

0 个答案: