0

estoy haciendo rutas para una app en react, estoy importando el componente "layout" a "navbar" pero me sale el siguiente error

Failed to compile ./src/componentes/shared/navbar.js Module not found: Can't resolve './componentes/routers/layouts'. estoy tratando de ver porque no me encuentra ese modulo en particular quizas, me he saltado la importacion de algun componente quizas.

LAYOUT:

import React from 'react';
import { Route, Switch } from 'react-router-dom';



export class Layout extends React.Component {
render() {
    return(

        <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/home' component={Home} />
            <Route exact path='/servicios' component={Servicios} />
            <Route exact path='/contacto' component={Contacto} />
        </Switch>

    );
 }
}

NAVBAR:

import React from 'react';
import { Link } from 'react-router-dom';
import { Layout } from './componentes/routers/layouts';

export const NavBar = () => {
return(
    <div>
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link to='/' className="navbar-brand">App_test</Link>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
            <li className="nav-item active">
                <Link to='/home' className="nav-link">Home <span className="sr-only">(current)</span></Link>
            </li>
            <li className="nav-item">
                <Link to='/servicios' className="nav-link">Servicios</Link>
            </li>

            <li className="nav-item">
                <Link to='contacto' className="nav-link">Contacto</Link>
            </li>

            </ul>
            <form className="form-inline my-2 my-lg-0">
            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    </div>
);
}

Esta es la distribucion de las carpetas utilizadas dentro de mi proyecto, algo simple.

 _src
  _componentes
    _routers 
     - layouts.js

    _shared
     - contacto.js
     - footer.js
     - navbar.js
     - home.js
     - servicios.js

app.js
index.js
2
  • podrías mostrar como están distribuidas las carpetas y archivos de tu proyecto para tener una visión mas amplia? Commented el 14 abr. 2019 a las 16:50
  • @nauseantparrot ahi amigo esta editada!
    – Richi
    Commented el 14 abr. 2019 a las 17:02

1 respuesta 1

2

Teniendo en cuenta la distribución de archivos y carpetas que muestras, el problema es que estas intentando buscar tu archivo layouts.js en la ruta /src/componentes/shared/routers/layouts.js debido a que le especificas que lo busque a partir de la carpeta actual, para que sea posible lograr lo que deseas, debes indicarle que primero salga de la carpeta actual y luego si vaya a la carpeta routers asi:

import { Layout } from '../routers/layouts'

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.