Reactjs unsichtbaren Komponenten

Question

Dies ist meine Haupt-Seite:

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

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

Und hier ist navBar Komponente

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; 

Aus irgendeinem Grund kann ich nicht die navigationbar Komponenten. ist dieses Problem mit dem Code oder den Konfigurationen verbunden?

Vielen Dank.

Answer 1

BEARBEITEN !!

Wie @Andrew Zustand: die Ursache ist Ihr Klassenname class navigationBar. Ändern Sie ihn auf class NavigationBar und exportieren es richtig beheben sollte es Exportstandard navigationbar; `

---

export default navigationBar;

Sie exportieren mit navigationBar standardmäßig. Bitte aktualisieren Sie den Import:

import navigationBar from './navigationBar';

Und

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

Answer 2

navigationBar sollte mit einem Großbuchstaben sein ->NavigationBar

Alle Komponenten mit einem Großbuchstaben sein sollten. Wenn eine Komponente mit einem kleinen Buchstaben, wird es wahrgenommen, als ob die Komponente ein Tag ist.