如何用React实现导航栏？自学React创建顶部导航栏遇困求助

嘿，我来帮你搞定这个顶部导航栏的问题！你的index.jsx目前负责渲染App组件，所以我们只需要把导航栏整合到App组件里（或者做成独立组件引入），就能让它显示在页面顶部啦。下面分步骤给你讲解：

第一步：创建独立的导航栏组件 #

为了代码的可维护性，我们最好把导航栏做成单独的组件。在你的components文件夹下新建一个Navbar.jsx文件，写入以下代码：

import React from 'react';

const Navbar = () => {
  return (
    {/* 用内联样式先快速实现样式，之后可以换成单独的CSS文件 */}
    <nav style={{ backgroundColor: '#333', padding: '1rem', color: 'white' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h1 style={{ margin: 0 }}>我的网站</h1>
        <ul style={{ listStyle: 'none', display: 'flex', gap: '1.5rem', margin: 0 }}>
          <li><a href="/" style={{ color: 'white', textDecoration: 'none' }}>首页</a></li>
          <li><a href="/about" style={{ color: 'white', textDecoration: 'none' }}>关于</a></li>
          <li><a href="/contact" style={{ color: 'white', textDecoration: 'none' }}>联系我们</a></li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

第二步：在App组件中引入导航栏 #

打开你的App.jsx，导入刚才创建的Navbar组件，并把它放在页面内容的最上方：

import React from 'react';
import Navbar from './Navbar'; // 确保路径和你的文件结构匹配

const App = () => {
  return (
    <div>
      {/* 导航栏放在最顶部，会优先渲染 */}
      <Navbar />
      {/* 这里是你的页面主体内容 */}
      <div style={{ padding: '2rem' }}>
        <h2>欢迎来到我的网站！</h2>
        <p>这是页面的主要内容区域~</p>
      </div>
    </div>
  );
};

export default App;

（可选）换成更规范的CSS样式 #

如果觉得内联样式太乱，我们可以创建单独的CSS文件来管理样式：

1. 在components文件夹下新建Navbar.css：

.navbar {
  background-color: #333;
  padding: 1rem;
  color: white;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-title {
  margin: 0;
}

.navbar-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

.navbar-links a {
  color: white;
  text-decoration: none;
}

.navbar-links a:hover {
  text-decoration: underline;
}

2. 修改Navbar.jsx导入CSS文件：

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navbar-container">
        <h1 className="navbar-title">我的网站</h1>
        <ul className="navbar-links">
          <li><a href="/">首页</a></li>
          <li><a href="/about">关于</a></li>
          <li><a href="/contact">联系我们</a></li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

（可选）添加单页应用路由 #

如果你的项目是单页应用，想要无刷新跳转，就需要用到react-router-dom：

1. 先安装依赖：

npm install react-router-dom

2. 修改index.jsx添加路由包裹：

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom';
import App from './components/App';
const node = document.querySelector('#app')
render(
  <Router>
    <App />
  </Router>, 
  node
);

3. 修改Navbar.jsx使用Link标签替换<a>：

import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navbar-container">
        <h1 className="navbar-title">我的网站</h1>
        <ul className="navbar-links">
          <li><Link to="/">首页</Link></li>
          <li><Link to="/about">关于</Link></li>
          <li><Link to="/contact">联系我们</Link></li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

4. 最后在App.jsx中配置路由规则：

import React from 'react';
import Navbar from './Navbar';
import { Routes, Route } from 'react-router-dom';
// 假设你已经创建了对应的页面组件
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};

export default App;

这样操作之后，你的导航栏就会稳稳地显示在页面顶部啦～

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