元素类型无效：检查渲染方法

Question

使用react-router-dom后发生以下错误：

  

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

App.js：

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router ,Route } from 'react-router-dom' ;
import Home from './components/Home' ;
import Company from './components/Company' ;
import News from './components/News' ;
import Services from './components/Services' ;
import Contact from './components/Contact' ;
import Partners from './components/Partners' ;
import Navbar from './components/CustomNavbar' ;


class App extends Component {
  render() {
    return (
      <Router> 
       <div>
         <Navbar />
        <Route exact path ="/" component ={Home} />
        <Route path ="/company" component ={Company} />
        <Route path ="/services" component ={Services} />
        <Route path ="/partners" component ={Partners} />
        <Route path ="/news" component ={News} />
        <Route path ="/contact" component ={Contact} />
       </div>
      </Router>
    );
  }
}

export default App;

CustomNavbar.jsx:

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router ,Route } from 'react-router-dom' ;
import Home from './components/Home' ;
import Company from './components/Company' ;
import News from './components/News' ;
import Services from './components/Services' ;
import Contact from './components/Contact' ;
import Partners from './components/Partners' ;
import Navbar from './components/CustomNavbar' ;


class App extends Component {
  render() {
    return (
      <Router> 
       <div>
         <Navbar />
        <Route exact path ="/" component ={Home} />
        <Route path ="/company" component ={Company} />
        <Route path ="/services" component ={Services} />
        <Route path ="/partners" component ={Partners} />
        <Route path ="/news" component ={News} />
        <Route path ="/contact" component ={Contact} />
       </div>
      </Router>
    );
  }
}

export default App;

Index.js :

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router ,Route } from 'react-router-dom' ;
import Home from './components/Home' ;
import Company from './components/Company' ;
import News from './components/News' ;
import Services from './components/Services' ;
import Contact from './components/Contact' ;
import Partners from './components/Partners' ;
import Navbar from './components/CustomNavbar' ;


class App extends Component {
  render() {
    return (
      <Router> 
       <div>
         <Navbar />
        <Route exact path ="/" component ={Home} />
        <Route path ="/company" component ={Company} />
        <Route path ="/services" component ={Services} />
        <Route path ="/partners" component ={Partners} />
        <Route path ="/news" component ={News} />
        <Route path ="/contact" component ={Contact} />
       </div>
      </Router>
    );
  }
}

export default App;