React路由映射异常：点击Navbar无法正确渲染对应组件

算力阿峰

2026-5-6

我在App.js中配置的路由映射出现问题，此前功能正常，但目前点击Navbar的“Add Robot”等标签时，无法正确渲染对应组件。我共有5个Navbar标签，期望点击后每次仅显示对应的组件。我的routes数组中包含组件对象，怀疑component的声明方式存在错误，当前routes.map的写法为{routes.map(({path, component:C}) => ( <Route path={path} component={<C/>} />)) }。请问如何修改routes.map，使Navbar点击时无错误地正确渲染对应组件？

解决方案

嗨，我来帮你搞定这个路由问题！核心问题出在你给Route的component prop传值的方式上，另外还有几个小细节需要调整：

1. 错误原因：组件实例化传递错误

Route的component属性需要接收组件类/函数本身，而不是你现在写的<C/>（这是已经渲染好的React元素）。这种写法会导致路由无法正确挂载组件，自然就看不到内容了。

2. 完整修改步骤

第一步：修正路由映射的写法

把原来的错误写法改成下面这样：

{routes.map(({ path, component: C, exact = false }) => (
  <Route key={path} path={path} exact={exact} component={C} />
))}

直接把组件C传给component prop，不再提前实例化
添加key属性（数组循环渲染必须加，避免React警告）
新增exact参数，方便控制路由是否精确匹配

第二步：补全routes数组的内容

你Navbar里有5个标签，但当前routes数组只写了3个，还要补上Home和DeleteRobot的路由，同时给根路由加上exact: true，避免其他路由匹配时也触发Home组件：

const routes = [
  {
    path: '/',
    exact: true,
    component: () => (
      <>
        <SearchBox searchChange={onSearchChange} />
        <Scroll>
          {isPending ? <h1>Loading</h1> : <ErrorBoundry><CardList robots={filteredRobots} /></ErrorBoundry>}
        </Scroll>
      </>
    )
  },
  {
    path: '/addRobo',
    component: () => <AddRobot get_name={get_name} name={name} get_username={get_username} username={username} get_email={get_email} email={email} add_robot={add_robot} />
  },
  {
    path: '/updateRobo',
    component: () => <UppdateRobot uppdate_robot={uppdate_robot} />
  },
  {
    path: '/searchRobo',
    component: () => <SearchBox searchChange={onSearchChange} />
  },
  {
    path: '/delRobo',
    component: DeleteRobot
  }
];

对于需要传递props的组件，用匿名函数返回实例化的组件（这种方式能灵活传递父组件的props）
Home路由整合了原来的SearchBox和CardList内容，点击Home标签时会显示首页内容

第三步：调整Switch的位置

把原来放在Scroll外面的Switch移到header下方，确保路由切换时只显示当前匹配的组件，首页内容只在根路由下显示：

return (
  <Router>
    <div className='tc'>
      {/* 原header和Navbar代码保持不变 */}
      <header className="bg-white black-80 tc pv4 avenir">
        {/* ... 原header内容 ... */}
      </header>
      {/* 把Switch移到这里，替换原来的位置 */}
      <Switch>
        {routes.map(({ path, component: C, exact = false }) => (
          <Route key={path} path={path} exact={exact} component={C} />
        ))}
      </Switch>
    </div>
  </Router>
);

这样修改后，点击Navbar的各个标签，就会精确匹配对应的路由，只渲染对应的组件了。

额外说明

如果你的组件需要接收路由相关的props（比如history、match），可以用Route的render prop，写法示例：render={(props) => <AddRobot {...props} get_name={get_name} />}
始终给循环渲染的Route加上唯一key，这里用path作为key是最稳妥的选择

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