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; 

出于某种原因，我无法看到的导航栏组件。 与代码或配置有关的这个问题？

谢谢。

Answer 1

编辑！

作为@Andrew状态：根本原因是您的班级名称class navigationBar。将其更改为class NavigationBar和正确导出它应该修复它的出口默认导航栏;`

---

export default navigationBar;

您在默认情况下navigationBar出口。请更新导入：

import navigationBar from './navigationBar';

而且

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

Answer 2

navigationBar应以大写字母 - >NavigationBar

所有部件应以大写字母。如果一个带有小写字母的组件被视为组件是标签。