React JS如何通过React Router实现点击页脚菜单渲染对应新页面

问题排查 #

• 基础语法错误：你的App组件没有return语句，定义的JSX结构没有被返回，会直接导致组件渲染失败。
• 路由结构逻辑错误：你将首页专属的Banner、Material、Product组件直接放在Router全局层级，无论访问什么路径这些组件都会被渲染，不符合跳转后仅展示Header+目标页面+Footer的需求。
• 版本兼容问题：如果你使用的是React Router v6及以上版本，Switch组件、component路由属性已经被废弃，语法不兼容会导致路由匹配失效。
• 样式属性错误：Final组件里的impressum、iconList对应的属性写的是classname，React中需要使用驼峰写法className，否则对应样式不会生效，不过该问题不影响路由跳转逻辑。

修复方案 #

调整App.js的路由结构，把公共组件（Header、Footer）放在路由外层，不同页面对应的内容放在路由规则内即可：

如果你使用React Router v5版本：

function App() {
  return (
    <>
      <Router>
        <Header />
        <Switch>
          {/* 首页路由，匹配根路径时渲染首页内容 */}
          <Route exact path="/" render={() => (
            <>
              <Banner />
              <Material />
              <Product />
            </>
          )} />
          {/* Imprint页面路由 */}
          <Route path="/imprint" component={Imprint} />
        </Switch> 
        <Final />
      </Router>
    </>
  )
}

如果你使用React Router v6版本（当前主流版本）：

import { Routes, Route, BrowserRouter as Router } from 'react-router-dom'

function App() {
  return (
    <>
      <Router>
        <Header />
        <Routes>
          {/* 首页路由 */}
          <Route path="/" element={
            <>
              <Banner />
              <Material />
              <Product />
            </>
          } />
          {/* Imprint页面路由 */}
          <Route path="/imprint" element={<Imprint />} />
        </Routes> 
        <Final />
      </Router>
    </>
  )
}

调整后渲染逻辑完全匹配你的预期：

• 访问根路径时：Header → 首页内容（Banner/Material/Product） → Final（页脚）
• 访问/imprint路径时：Header → Imprint → Final（页脚）

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