点击Gallery按钮跳转至独立图片页面的React路由问题排查

核心问题 #

你的代码目前存在两个关键问题：

• Layout组件未在路由中使用，首页的导航、头部等内容没有通过路由管理
• Gallery页面直接渲染，但你需要的是它仅展示图片，不包含Layout里的Header、AboutUs等冗余组件

修改步骤 #

1. 重构App.js的路由结构

将首页内容用Layout包裹作为默认路由，Gallery路由单独配置，不嵌套Layout的多余内容：

import React from 'react';
import { AboutUs, Header, SpecialMenu, Chef, Gallery } from './container';
import './App.css';
import Layout from './Layout';
import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => (
  <BrowserRouter>
    <Routes>
      {/* 首页：通过Layout包裹导航和首页内容 */}
      <Route path="/" element={
        <Layout>
          <Header />
          <AboutUs />
          <SpecialMenu />
          <Chef />
        </Layout>
      } />
      {/* 独立Gallery页面：仅渲染Gallery组件 */}
      <Route path="/gallery" element={<Gallery />} />
    </Routes>
  </BrowserRouter>
);

export default App;

2. 简化Layout.js

让Layout只保留固定导航栏，首页的其他内容通过props.children传入：

import React from 'react'
import { Navbar } from './components';
import './App.css';

export default function Layout(props) {
    return (
        <>
            <Navbar /> {/* 包含Gallery按钮的固定导航 */}
            {props.children} {/* 首页的其他内容区域 */}
        </>
    )
}

3. 配置Navbar的跳转链接

在Navbar组件中使用react-router-dom的Link组件，实现点击跳转：

// Navbar组件示例代码
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      {/* 其他导航选项 */}
      <Link to="/gallery">Gallery</Link>
    </nav>
  )
}

export default Navbar;

修改完成后：

• 访问首页/时，会显示导航栏+头部+关于我们等完整内容
• 点击导航栏的Gallery按钮，会跳转到/gallery页面，仅展示Gallery组件的图片内容

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