如何在React/Vite餐厅项目中实现5个页面的切换

方案一：基于状态控制显示/隐藏（匹配你的初始思路） #

第一步：修改Header组件 #

让Header接收父组件传递的页面切换回调，给导航项添加点击事件，触发页面切换：

import React from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons'

// 导入你的资源文件...

export default function Header({ currentPage, onPageChange }) {
  return(
      <section className='part1'>
          <div className='restaurant-header'>
              <h1 className='title'>HopeLake</h1>
              <div className='top-sec'>
                  <ul className='top-icons'>       
                      <FontAwesomeIcon icon={faInstagram} className='icons'/>
                      <FontAwesomeIcon icon={faFacebook} className='icons'/>
                  </ul>
                  <ul className='top-list'>
                      <li 
                          onClick={() => onPageChange('home')}
                          style={{ cursor: 'pointer', fontWeight: currentPage === 'home' ? 'bold' : 'normal' }}
                      >HOME</li>
                      <li 
                          onClick={() => onPageChange('about')}
                          style={{ cursor: 'pointer', fontWeight: currentPage === 'about' ? 'bold' : 'normal' }}
                      >ABOUT</li>
                      <li 
                          onClick={() => onPageChange('menu')}
                          style={{ cursor: 'pointer', fontWeight: currentPage === 'menu' ? 'bold' : 'normal' }}
                      >MENU</li>
                      <li 
                          onClick={() => onPageChange('order')}
                          style={{ cursor: 'pointer', fontWeight: currentPage === 'order' ? 'bold' : 'normal' }}
                      >ORDER</li>
                      <li 
                          onClick={() => onPageChange('contact')}
                          style={{ cursor: 'pointer', fontWeight: currentPage === 'contact' ? 'bold' : 'normal' }}
                      >CONTACT</li>
                  </ul>
                  <button className='log-in'>Log In</button>
              </div>
          </div>
      </section>
  )
}

第二步：修改App.jsx #

添加状态管理当前页面，根据状态控制各页面的显示/隐藏：

import './App.css';
import { useState } from 'react';

import Header from './header';
import Footer from './footer'

import Home from './home'
import About from './about'
import Menu from './menu' // 需确保你已创建对应组件
import Order from './order'
import Contact from './contact'

function App() {
  // 默认显示首页
  const [currentPage, setCurrentPage] = useState('home');

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <Header currentPage={currentPage} onPageChange={handlePageChange} />
      
      {/* 用display属性控制显示逻辑 */}
      <Home style={{ display: currentPage === 'home' ? 'flex' : 'none' }} />
      <About style={{ display: currentPage === 'about' ? 'flex' : 'none' }} />
      <Menu style={{ display: currentPage === 'menu' ? 'flex' : 'none' }} />
      <Order style={{ display: currentPage === 'order' ? 'flex' : 'none' }} />
      <Contact style={{ display: currentPage === 'contact' ? 'flex' : 'none' }} />

      <Footer/>
    </div>
  );
}

export default App;

如果想更高效（不渲染未激活的组件），可以替换成条件渲染写法：

// App.jsx中替换页面渲染部分
{currentPage === 'home' && <Home />}
{currentPage === 'about' && <About />}
{currentPage === 'menu' && <Menu />}
{currentPage === 'order' && <Order />}
{currentPage === 'contact' && <Contact />}

方案二：使用React Router（单页应用标准方案） #

如果项目后续有扩展需求，推荐用React Router，它能管理URL路径，支持浏览器前进后退，更符合单页应用的用户体验。

1. 安装依赖 #

npm install react-router-dom

2. 修改App.jsx #

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Header from './header';
import Footer from './footer'

import Home from './home'
import About from './about'
import Menu from './menu'
import Order from './order'
import Contact from './contact'

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/menu" element={<Menu />} />
          <Route path="/order" element={<Order />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
        <Footer/>
      </div>
    </Router>
  );
}

export default App;

3. 修改Header组件的导航项 #

将普通文本替换为Router的Link组件，实现URL跳转：

// Header组件中top-list部分替换为：
<ul className='top-list'>
  <li>
    <Link 
      to="/" 
      style={{ 
        textDecoration: 'none', 
        color: 'inherit', 
        fontWeight: window.location.pathname === '/' ? 'bold' : 'normal' 
      }}
    >HOME</Link>
  </li>
  <li>
    <Link 
      to="/about" 
      style={{ 
        textDecoration: 'none', 
        color: 'inherit', 
        fontWeight: window.location.pathname === '/about' ? 'bold' : 'normal' 
      }}
    >ABOUT</Link>
  </li>
  <li>
    <Link 
      to="/menu" 
      style={{ 
        textDecoration: 'none', 
        color: 'inherit', 
        fontWeight: window.location.pathname === '/menu' ? 'bold' : 'normal' 
      }}
    >MENU</Link>
  </li>
  <li>
    <Link 
      to="/order" 
      style={{ 
        textDecoration: 'none', 
        color: 'inherit', 
        fontWeight: window.location.pathname === '/order' ? 'bold' : 'normal' 
      }}
    >ORDER</Link>
  </li>
  <li>
    <Link 
      to="/contact" 
      style={{ 
        textDecoration: 'none', 
        color: 'inherit', 
        fontWeight: window.location.pathname === '/contact' ? 'bold' : 'normal' 
      }}
    >CONTACT</Link>
  </li>
</ul>

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