React Bootstrap NavBar代码修复求助：仅显示Database文本

你的导航栏未渲染主要有两个核心问题，按以下步骤修改即可：

1. 修复Navigation组件的return语法错误 #

在Navigation.js的render方法中，return后直接换行并使用大括号会触发JavaScript的自动分号插入机制，导致组件实际返回undefined，自然无法渲染。

修改后的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 ( // 必须用括号包裹JSX，且return与括号不能换行
            <Navbar bg="dark" expand="lg" className="mb-3">
                {/* 添加Navbar.Brand完善导航栏结构，可选但推荐 */}
                <Navbar.Brand className="text-white ms-2">Database</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" className="text-white"/>
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <NavLink className="d-inline p-2 text-white" to="/">
                            Home
                        </NavLink>
                        <NavLink className="d-inline p-2 text-white" to="/student">
                            Students
                        </NavLink>
                        <NavLink className="d-inline p-2 text-white" to="/professor">
                            Professors
                        </NavLink>
                        <NavLink className="d-inline p-2 text-white" to="/course">
                            Courses
                        </NavLink>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        )
    }
}

2. 适配react-router-dom v6的Route写法 #

你使用的是react-router-dom v6（从Routes组件可判断），但v6中Route不再支持component属性，需改用element属性传入组件实例：

修改后的App.js路由部分：

// ...其他代码不变
<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/student' element={<Student />}/>
  <Route path='/professor' element={<Professor />}/>
  <Route path='/course' element={<Course />}/>
</Routes>
// ...其他代码不变

额外优化（可选） #

• 移除NavLink上的bg-dark类，避免与导航栏背景样式冲突
• 给Navbar添加mb-3类，与下方内容拉开间距

内容的提问来源于stack exchange，提问作者AnCoder34