React应用导航栏链接不显示，仅手动输入路径可切换页面求助

问题根源 #

1. 核心问题：你的index.js里直接渲染了Router+Routes，但完全没渲染App组件，导致App里的NavBar根本没被加载到页面上，自然看不到导航链接。
2. 路由版本不兼容：App.js用了React Router旧版本的component属性写法，但index.js用的是v6版本的element属性，写法混乱。
3. 缺少默认路由：打开首页（localhost:3000/）时没有对应路由，无法自动显示Home页面。

修复步骤&代码示例 #

首先确保你安装的是React Router v6：

npm install react-router-dom@6

1. 修改index.js

把App组件放到Router内部，让App的内容（包括NavBar）能被渲染：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

2. 修改App.js

改用React Router v6的Routes和Route写法，把NavBar放在Routes外面确保一直显示，同时添加根路径重定向：

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import NavBar from './NavBar';
import Home from './Home';
import Stocks from './Stocks';

function App() {
  return (
    <div className="App">
      {/* 导航栏放在Routes外，始终显示 */}
      <NavBar />
      <Routes>
        {/* 根路径自动跳转到/home */}
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/stocks" element={<Stocks />} />
      </Routes>
    </div>
  );
}

export default App;

3. 检查NavBar.js

确保正确导入Link组件：

import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <ul style={{ listStyle: 'none', display: 'flex', gap: '20px', padding: '10px' }}>
      <li>
        <Link to="/home">Home</Link>
      </li>
      <li>
        <Link to="/stocks">Stocks</Link>
      </li>
    </ul>
  );
}

export default NavBar;

修复后效果 #

• 启动项目后，首页自动跳转到/home，同时显示导航链接
• 点击Home/Stocks可以自由切换页面
• 手动输入URL依然正常工作

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