如何在 JS 中使用 React Boostrap 创建 NavBar？

Question

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>
        }
    }
}

Answer 1

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>
        );
    }
}