Estoy tratando de crear una barra de navegación de reacción boostrap, estoy siguiendo una guía y este código DEBERÍA estar funcionando, pero no es así. En su lugar, solo muestra el texto de la "base de datos" y no la barra de navegación. Tenga en cuenta que sé que hay diferentes formas de crear ne, pero quiero corregir este código. ¡Cualquier ayuda sería muy apreciada!

Aplicación.js:

 import './App.css'; import {Home} from './Home'; import {Student} from './Student'; import {Professor} from './Professor'; import {Course} from './Course'; import {Navigation} from './Navigation'; import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; function App() { return ( <Router> <div className="container"> <h3 className="m-3 d-flex justify-content-center"> Database </h3> <Navigation/> <Routes> <Route path='/' component={Home} /> <Route path='/student' component={Student}/> <Route path='/professor' component={Professor}/> <Route path='/course' component={Course}/> </Routes> </div> </Router> ); } export default App;

Navegación.js:

 import React,{Component} from 'react'; import {NavLink} from 'react-router-dom'; import {Navbar, Nav} from 'react-bootstrap'; export class Navigation extends Component { render() { return { <Navbar bg="dark" expand="lg"> <Navbar.Toggle aria-controls="basic-navbar-nav"/> <Navbar.Collapse id="basic-navbar-nav"> <Nav> <NavLink className="d-inline p-2 bg-dark text-white" to="/"> Home </NavLink> <NavLink className="d-inline p-2 bg-dark text-white" to="/student"> Students </NavLink> <NavLink className="d-inline p-2 bg-dark text-white" to="/professor"> Professors </NavLink> <NavLink className="d-inline p-2 bg-dark text-white" to="/course"> Courses </NavLink> </Nav> </Navbar.Collapse> </Navbar> } } }