Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

247
Vistas
How do I create a NavBar using React Boostrap in JS?

I am trying to create a boostrap react navbar, I am following a guide and this code SHOULD be working but it isn't. Instead it only displays the "database" text and not the navbar. Please do keep in mind that I know there are different ways of creating ne but I want to fix this code. Any help would be greatly appreciated!

App.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;

Navigation.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>
        }
    }
}
about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

return method inside class should have parenthesis instead of curly brackets.

I fixed and added the answer. Replace Navigation.js code by following.

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>
        );
    }
}
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda