0

Estoy haciendo un proyecto en react e importé bootstrap por medio de yarn add boostrap pero no me funciona. La única manera en la que lo puedo importar sin que genere error es import 'boostrap/package.json';.

Sin embargo trato de usarlo en un componente y no funciona. Cuando digo que no funciona es que parece que no lo estuviera utilizando, parece html simple y carga los diseños.

Archivo index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'boostrap/package.json';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Componente Menu.jsx

import React from 'react'
import {Link} from 'react-router-dom'
const Menu = () => {
    return (
        <div>
            <nav className="navbar navbar-expand-lg navbar-dark  bg-dark">
            <ul className="navbar-nav mr-auto">
                <li className="nav-item'">
                    <Link className="nav-link" to='/'>Inicio</Link>
                </li>
                <li>
                <Link  className="nav-link" to='/login'>Login</Link>
                </li>
                <li>
                <Link  className="nav-link" to='/admin'>Admin</Link>
                </li>
            </ul>
            </nav>
        </div>
    )
}

export default Menu

App.jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Inicio from './components/Inicio';
import Login from './components/Login';
import Admin from './components/Admin';
import Menu from './components/Menu';

function App() {
  return (
    <div className='container'>
      <Router>
      <Menu></Menu>
      <Routes>
      <Route exact path='/' element={<Inicio/>}></Route>
      <Route path='/admin' element={<Admin/>}></Route>
      <Route path='/login' element={<Login/>}></Route>
      </Routes>

      </Router>
      
    </div>
  );
}

export default App;
2
  • Pista: booTstrap, no boostrap.
    – padaleiana
    Commented el 13 ene. 2022 a las 17:35
  • @padaleiana Muchas gracias!!.
    – Juanes
    Commented el 13 ene. 2022 a las 21:00

1 respuesta 1

1

De acuerdo a la documentación de la API, deberías importarlo así:

import 'bootstrap/dist/css/bootstrap.min.css';

Lo que estás importando actualmente es un archivo JSON, no la librería.

Saludos.

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.