提问者:小点点

在“”中找不到导出“NavBar”(作为“NavBar”导入)/导航栏'(可能的导出:默认)[重复]


编译时出现问题:X

./src/App 中的错误.js

在“”中找不到导出“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;

共1个答案

匿名用户

这听起来可能很傻,但对我来说,当使用导出默认NavBar导出组件以进行导入时,我必须将其设置为

< code >从“”导入导航栏。/NavBar"

代替

从“./NavBar”导入{NavBar}

也许你可以试试这个