使用Array.reduce+Object.assign动态生成hookrouter路由遇PascalCase警告

首先咱们得揪出问题的根源：你当前的代码里，<Item.label />根本不是在渲染你期望的About、Sites这些组件——JSX会把<Item.label />解析成一个名为Item.label的标签，而Item.label是字符串，React自然会报错说大小写不符合规范。

问题拆解 #

你的routes数组里的label是字符串（比如"About"），但React组件要求的是大写开头的变量引用，不是字符串。直接写<Item.label />相当于让React去渲染一个叫About的HTML元素（这玩意儿不存在），而不是你的自定义About组件，这就触发了PascalCase警告。

解决方案 #

我们需要先搭一个字符串到组件的映射表，把路由里的label字符串和对应的React组件绑定起来，再动态生成路由配置：

步骤1：创建组件映射表 #

先把所有页面组件和对应的label字符串对应好：

// 先导入你的所有页面组件
import Root from './Root';
import About from './About';
import Sites from './Sites';
import Blog from './Blog';

// 建立label字符串到组件的映射关系
const componentMap = {
  Root: Root,
  About: About,
  Sites: Sites,
  Blog: Blog
};

步骤2：动态生成directions对象 #

接着修改你的reduce逻辑，通过映射表拿到正确的组件，再渲染：

const routes = [ 
  { href: '/', label: 'Root' }, 
  { href: '/About', label: 'About' }, 
  { href: '/Sites', label: 'Sites' }, 
  { href: '/Blog', label: 'Blog' } 
].map(route => { 
  route.key = `nav-route-${route.href}-${route.label}`; 
  return route; 
});

export const directions = routes.reduce((object, route) => {
  // 从映射表中取出对应的组件，注意变量名要大写开头
  const Component = componentMap[route.label];
  return Object.assign(object, {
    [route.href]: () => <Component />
  });
}, {});

这里的关键是把拿到的组件赋值给大写开头的变量Component——React明确要求组件名必须以大写字母开头，这样它才会识别为自定义React组件，而不是原生HTML元素，警告自然就消失了。

为什么之前的写法失效？ #

JSX的标签名有严格规则：要么是小写开头的字符串（对应原生HTML元素），要么是大写开头的变量（对应自定义React组件）。你之前直接用字符串当标签名，完全不符合语法规范，所以才会触发警告。通过映射表把字符串转换成真正的组件引用，再用大写变量承接，就完美解决了这个问题。

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