1

Tengo esta aplicación en react donde defino dos componentes un header i un footer siguiente esta estructura

Con este código el header

import React, { Component } from "react";

export default class Header extends Component {
    render() {
        return (
            <h2>Header</h2>
        );
    }
}

El código del footer

import React, { Component } from "react";

export default class Footer extends Component {
    render() {
        return (
            <h2>Footer</h2>
        );
    }
}

Y lo que intento hacer es desde otro componente llamar a estos dos para renderizarlos, para ello hago esto

import React, { Component } from "react";
import Header from "./components/layout/header.js";
import Footer from "./components/layout/footer.js";

export default class ListItems extends Component {

    constructor(props) {
        super(props);
    }


    render() {
      return <Header/> contenido <Footer/>;
    }
  }

introducir la descripción de la imagen aquí

El error que me da es este

./src/components/items/list-cars.component.js
Module not found: Can't resolve './components/layout/footer.js' in   
'C:\xampp\htdocs\react-login\src\components\items'

1 respuesta 1

1

Si usas import Footer from "./components/layout/footer.js"; le estás indicando con ./ que la ruta es relativa a la ruta donde se encuentra el archivo actual. Como list-cars.component.js se encuentra ubicado dentro de la carpeta items/, deberías retroceder un nivel con ../, algo como:

import Header from "../layout/header.js";
import Footer from "../layout/footer.js";

o remover el ./ para que considere el root de tu proyecto:

import Header from "components/layout/header.js";
import Footer from "components/layout/footer.js";

Otro punto, es que .js no es estrictamente necesario, así que también puedes removerlo si quieres.

1
  • Muchas gracias. Arreglado. 1000 gracias
    – ilernet
    Commented el 4 feb. 2020 a las 22:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.