Блог

Главная - Вопросы по программированию - Почему я не могу импортировать свой компонент в свое приложение?

Почему я не могу импортировать свой компонент в свое приложение?

#reactjs #react-component

#reactjs #реагирующий компонент

Вопрос:

Я пытаюсь импортировать компонент в свое app.js , но продолжаю получать эту ошибку:

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или, возможно, перепутали импорт по умолчанию и именованный импорт.

Вот код компонента:

 import React, { Link } from 'react';
import { Nav, Navbar } from 'react-bootstrap';

function NavBar() {
  return (
    <Navbar bg='dark' variant='dark' className='navBar'>
      <Navbar.Brand style={{ gridColumnStart: '2' }}>C C</Navbar.Brand>
      <Nav style={{ gridColumnStart: '6' }}>
        <Link
          className='link'
          activeClass='active'
          to='home'
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
          href='#home'
        >
          Home
        </Link>
        <Link
          className='link'
          activeClass='active'
          to='post'
          spy={true}
          smooth={true}
          offset={-90}
          duration={500}
          href='#features'
        >
          Post
        </Link>
        <Link
          className='link'
          activeClass='active'
          to='signout'
          spy={true}
          smooth={true}
          offset={-30}
          duration={500}
          href='#features'
        >
          Sign Out
        </Link>
      </Nav>
    </Navbar>
  );
}

export default NavBar;

И вот мой app.js :

 import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import NavBar from './components/NavBar';
import Home from './pages/Home';
import Login from './pages/Login';
import Registration from './pages/Registration';
import Post from './pages/Post';

import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <NavBar />
        <Router>
          <Route exact path='/' render={(props) => <Home {...props} />} />
          <Route path='/login'>
            <Login />
          </Route>
          <Route path='/register'>
            <Registration />
          </Route>
          <Route path='/post'>
            <Post />
          </Route>
        </Router>
      </div>
    );
  }
}

export default App;

Как вы можете видеть, я пытался импортировать его так же, как я импортировал все остальные компоненты, поэтому я не уверен, что я сделал неправильно. Почему мой компонент navbar не импортируется в мое app.js ?

Ответ №1:

я нашел несколько проблем и решил проблему, вот рабочий codesandbox

1: Неправильный Link импорт (основной)

В NavBar компоненте

 import React, { Link } from 'react';

Вы ошибочно импортировали Link из react . Вероятно, вы хотели этого,

 import React from 'react';
import { Link } from "react-router-dom";

2. Использование Link вне Router

в App компоненте

 class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <NavBar /> // <-- Outside `Router`
        <Router>
          // <NavBar /> component should be here
          <Route exact path='/' render={(props) => <Home {...props} />} />
          <Route path='/login'>
            <Login />
          </Route>
          <Route path='/register'>
            <Registration />
          </Route>
          <Route path='/post'>
            <Post />
          </Route>
        </Router>
      </div>
    );
  }