在'./NavBar'中找不到导出'NavBar'(作为"导航栏"导入)(可能的导出：默认)

Question

编译时出现问题：X

中的错误/src/App.js

在"中找不到导出"NavBar"(导入为"NavBar"(/NavBar'(可能的导出：默认值(这是我的导航条Js我已经导出了导航条，但我还是收到了这个错误：(

import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = () => (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/articles-list">Articles</Link>
</li>
</ul>
</nav>
);
export default NavBar;

这是App.js，我在其中导出了应用程序，但它仍然显示错误

import  React , { Component } from 'react';
import { BrowserRouter as Routes, Route, Switch,} from 'react-router-dom';
import { HomePage } from './pages/HomePage';
import { AboutPage } from './pages/AboutPage';
import { ArticlesListPage } from './pages/ArticlesListPage';
import { ArticlePage } from './pages/ArticlePage';
import { NotFoundPage } from './pages/NotFoundPage';
import { NavBar } from './NavBar';
import './App.css';
class App extends Component {
render() {
return (
<Routes>
<div className="App">
<NavBar />
<Switch>
<Route path="/" component={< HomePage />} exact />
<Route path="/about" component={< AboutPage /> } />
<Route path="/articles-list" component={< ArticlesListPage />} />
<Route path="/article/:name" component={< ArticlePage />} />
<Route component={< NotFoundPage />} />
</Switch>
</div>
</Routes>
);
}
}
export default App;

Answer 1

这听起来可能很傻，但对我来说，当使用export default NavBar导出组件时对于进口，我必须把它作为

import NavBar from "./NavBar"

而不是

import { NavBar } from "./NavBar

也许你可以试试这个