CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-router
Ben
Ben

Reputation: 37

React File Import Issue

I'm very new to React and ran into an issue when trying to import a "sub-component", for lack of a better word.

In my App.js file I imported my header class: import Header from './Components/Header/Header'; Which worked fine.

Within my Header.js file I'm using router to select different components. However, when I try to import my Home class: import Home from '../Subcomponents/HomePage/HomePage'; I receive the following error: Module not found: Can't resolve '../Subcomponents/HomePage/HomePage'

My file structure is:

App.js Code:

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;

Header Code:

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;

HomePage Code:

import React from 'react';

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

export default homepage;

Am I doing something wrong here or is this not possible in React? Any advice would be greatly appreciated!

Thanks!

Upvotes: 0

Views: 638

Answers (1)

Matthew Herbst
Matthew Herbst

Reputation: 31973

From Header.js, ../ puts you into Components, not into the parent. It should be '../../Subcomponents/HomePage/HomePage'.

Also, imho: within each component folder, name the file index.js so that it will be automatically exported. Than you can just do: '../../Subcomponents/HomePage'

Upvotes: 3

Related Questions