Reactjs看不见的组件[重复]

Question

这是我的主页：

import React, {Component} from 'react';
import navBar from './navigationBar';

class Main extends Component {
    render() {
        return (
            <div className="container">
                <navBar/>
            </div>
        );
    }
}
export default Main;

这里是导航栏组件

import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'

class navigationBar extends React.Component  {
    render() {
        return (
            <div className="nav">
                <nav className="navbar navbar-inverse bg-inverse">
                    <ul className="nav navbar-nav">
                        <li className="nav-item">
                            <Link to={"/data"} className="nav-link"> Data </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/analysis"} className="nav-link"> Analysis </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/Monitor"} className="nav-link"> Monitor </Link>
                        </li>
                    </ul>
                </nav>
                <Route path={"/webiks/:user"} component={Error}/>
            </div>
        );
    }
}

export default navigationBar;

由于某种原因，我看不到 navigationBar 组件。 这个问题是和代码有关还是和配置有关？

谢谢。

Answer 1

navigationBar 应该是大写字母 -> NavigationBar

所有组件都应使用大写字母。如果组件带有小写字母，则认为组件是标签。

Answer 2

编辑！！

正如@Andrew 所说：根本原因是您的班级名称class navigationBar。将其更改为class NavigationBar 并正确导出它应该修复它导出默认导航栏；`

---

export default navigationBar;

默认情况下，您使用navigationBar 导出。请更新导入：

import navigationBar from './navigationBar';

和

<div className="container"> <navigationBar/> </div>