Реагировать на проблему импорта файлов - PullRequest
0 голосов
/ 23 декабря 2018

Я очень плохо знаком с React и столкнулся с проблемой при попытке импортировать «подкомпонент» из-за отсутствия лучшего слова.

В своем файле App.js я импортировал свой класс заголовка: импортировать заголовок из './Components/Header/Header';Который работал нормально.

В моем файле Header.js я использую маршрутизатор для выбора различных компонентов.Однако, когда я пытаюсь импортировать мой класс Home: импортировать Home из '../Subcomponents/HomePage/HomePage';Я получаю следующую ошибку: Модуль не найден: Не удается разрешить '../Subcomponents/HomePage/HomePage'

Моя файловая структура:

  • app.js
  • Компоненты / Заголовок / Header.js
  • Подкомпоненты / HomePage / HomePage.js

App.js Код:

import React, { Component } from 'react';

import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import Body from './Components/Body/Body';

import './Assets/css/mainCSS.css';

class App extends Component {
  render() {
    return (
      <div className="App">

      <Header />

        <Body />

      <Footer/>

      </div>
    );
  }
}

export default App;

Код заголовка:

import React from 'react';
import Home from '../Subcomponents/HomePage/HomePage';

import { Router, Route, Link } from 'react-router-dom';


const header = () => {
    return <header>
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to='/'>Home</Link>
                    </li>
                </ul>

                <hr />

                <Route excat path ="/" component={Home} />

            </nav>
        </Router>
    </header>

}

export default header;

Домашняя страница Код:

import React from 'react';

const homepage =() =>{
    return <p>
        homepage working
        
        </p>
}

export default homepage;

Я что-то здесь не так делаю или это невозможно в React?Любой совет будет принята с благодарностью!

Спасибо!

1 Ответ

0 голосов
/ 23 декабря 2018

С Header.js, ../ помещает вас в Components, а не в родителя.Это должно быть '../../Subcomponents/HomePage/HomePage'.

Кроме того, imho: в каждой папке компонента назовите файл index.js, чтобы он автоматически экспортировался.Чем вы можете просто сделать: '../../Subcomponents/HomePage'

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...