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

所有部件應以大寫字母。如果一個帶有小寫字母的組件被視爲組件是標籤。