Question

我确定我已导出所有组件，但仍然出现相同的错误：

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

App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home.js';
import Navbar from './CustomNavbar.js';


class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Route exact path="/" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;

CustomNavbar.js

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class CustomNavbar extends Component {
    render() {
        return (
            <Navbar default collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link to="/">My Page</Link>
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav pullRight>
                <NavItem eventKey={1} componentClass={Link} to="/">
                    Home
                </NavItem>
                </Nav>
            </Navbar.Collapse>
            </Navbar>
        )
    }
}

Home.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Jumbotron, Button } from 'react-bootstrap';

export default class Home extends Component {
    render() {
        return(
            <div>
            <Jumbotron>
                <h1>Hello, this is my page</h1>
            </Jumbotron>
            <Link to="/about">
            <Button bsStyle="primary">About</Button>
            </Link>
            </div>

        )
    }
}

Answer 1

更改此

import Navbar from './CustomNavbar.js';

到

import CustomNavbar from './CustomNavbar.js';

和

更改

  <Navbar />

收件人

  <CustomNavbar />

在App.js中

我想出口什么零件？错误类型无效...错误

1 个答案: