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;
booTstrap
, noboostrap
.