Ok, para las personas que quieren hacer una barra lateral, lamentablemente la noticia es que tienes que hacerlo todo tú mismo.

Lo que he hecho es lo siguiente.

1. Vea el ejemplo en https://github.com/StartBootstrap/startbootstrap-simple-sidebar
2. Cree sidebar.js en algún lugar de su aplicación.

 import React from "react"; import {Nav} from "react-bootstrap"; import { withRouter } from "react-router"; import '../pages/style/Dashboard.css' const Side = props => { return ( <> <Nav className="col-md-12 d-none d-md-block bg-light sidebar" activeKey="/home" onSelect={selectedKey => alert(`selected ${selectedKey}`)} > <div className="sidebar-sticky"></div> <Nav.Item> <Nav.Link href="/home">Active</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-1">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-2">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="disabled" disabled> Disabled </Nav.Link> </Nav.Item> </Nav> </> ); }; const Sidebar = withRouter(Side); export default Sidebar

3. Mi Dashboard.css tiene lo siguiente.

 .sidebar { position: fixed; top: 0; bottom: 0; left: 0; min-height: 100vh !important; z-index: 100; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } #sidebar-wrapper{ min-height: 100vh !important; width: 100vw; margin-left: -1rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #page-content-wrapper { min-width: 0; width: 100%; }

Luego, paso final En el archivo en el que desea que se muestre, haga lo siguiente

 import React from "react"; import {Container, Row, Col, Card, Form, Button } from "react-bootstrap"; import { withRouter } from "react-router"; import Sidebar from "../moduls/sidebar.js"; import './style/Dashboard.css' const Dash = props => { return ( <> <Container fluid> <Row> <Col xs={2} id="sidebar-wrapper"> <Sidebar /> </Col> <Col xs={10} id="page-content-wrapper"> this is a test </Col> </Row> </Container> </> ); }; const Dashboard = withRouter(Dash); export default Dashboard

por supuesto, debe crear la barra de navegación usted mismo y los ejemplos anteriores son muy válidos, pero cdbreact acelera el proceso mucho más rápido. simplemente agregue cdbreact usando

npm yo cdbreact

o

añadir hilo cdbreact

y luego importe CDBSidebar, CDBSidebarContent, CDBSidebarHeader, etc. con cdbreact, no necesita preocuparse por instalar bootsrap en su aplicación de reacción. cdbreact también viene con íconos y mucho más.

importar React desde 'reaccionar' importar {CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem} desde 'cdbreact'; importar {NavLink, Link} desde 'react-router-dom'; importar {} desde 'react-router-dom';

 const Sidebar=()=>{ return ( <div style={{display:'flex', height:'100%', overflow:'scroll initial'}}> <CDBSidebar textColer="#fff" backgroundColor="rgb(37, 90, 122)"> <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}> <Link to="/dashboard">Dashboard</Link> </CDBSidebarHeader> <CDBSidebarContent className="sidebar-content"> <CDBSidebarMenu> <NavLink exact to="/dashboard" activeClassName="activeClicked"> <CDBSidebarMenuItem icon="columns"> Transfer </CDBSidebarMenuItem> </NavLink> <NavLink exact to="/dashboard" activeClassName="activeClicked"> <CDBSidebarMenuItem icon="columns"> Transfer </CDBSidebarMenuItem> </NavLink> <NavLink exact to="/dashboard" activeClassName="activeClicked"> <CDBSidebarMenuItem icon="columns"> Transfer </CDBSidebarMenuItem> </NavLink> <NavLink exact to="/dashboard" activeClassName="activeClicked"> <CDBSidebarMenuItem icon="columns"> Transfer </CDBSidebarMenuItem> </NavLink> </CDBSidebarMenu> </CDBSidebarContent> <CDBSidebarFooter style={{textAlign:'center'}}> <div className="sidebar-btn-wrapper" style={{ padding :'20px 5px' }}> sidebar footer </div> </CDBSidebarFooter> </CDBSidebar> </div> ) } export default Sidebar;

también puede seguir la guía aquí https://dev.to/devwares/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi2 siga este enlace para ver

Ahora se puede usar una biblioteca, react-bootstrap-drawer , que proporciona un sidenav/cajón que se tomó directamente de la documentación de react-bootstrap . Curiosamente, este no es un componente proporcionado por la biblioteca en sí, por lo que debe usar una biblioteca de terceros:

 import 'react-bootstrap-drawer/lib/style.css'; import React, { useState } from 'react'; import { Col, Collapse, Container, Row, } from 'react-bootstrap'; import { Drawer, } from 'react-bootstrap-drawer'; const ApplicationDrawer = (props) => { const [open, setOpen] = useState(false); const handleToggle = () => setOpen(!open); return ( <Drawer { ...props }> <Drawer.Toggle onClick={ handleToggle } /> <Collapse in={ open }> <Drawer.Overflow> <Drawer.ToC> <Drawer.Header href="/">Application</Drawer.Header> <Drawer.Nav> <Drawer.Item href="/settings">Settings</Drawer.Item> </Drawer.Nav> </Drawer.ToC> </Drawer.Overflow> </Collapse> </Drawer> ); }; const Application = (props) => { return ( <Container fluid> <Row className="flex-xl-nowrap"> <Col as={ ApplicationDrawer } xs={ 12 } md={ 3 } lg={ 2 } /> <Col xs={ 12 } md={ 9 } lg={ 10 }>{ props.children }</Col> </Row> </Container> ); };

Ver: https://github.com/SimpleSigner/react-bootstrap-drawer