React正常传props时报错无法读取undefined的props.title问题排查

两处写法错误直接触发报错，和函数组件props的使用逻辑无关：

1. 组件导出错误 #

SocialCard文件最后一行导出写法有误：

export default SocialCard();

导出时加括号等于直接无参调用了SocialCard函数，最终导出的是函数执行返回的JSX，而非组件本身。无参调用时入参props为undefined，函数内部读取props.title会直接抛出类型错误。且该错误会在文件被导入时立即触发，和路由是否匹配到Socials页面无关，这就是你访问"/"路径就报错的核心原因。
修正为导出组件本身，不要加括号调用：

export default SocialCard;

2. React Router v6 路由配置错误 #

路由的element属性直接传入了组件函数，不符合v6版本的API要求：

<Route path="/" element={Home} exact/>

React Router v6中element属性需要接收可直接渲染的React元素，而非组件引用，同时v6版本路由默认精确匹配，不需要额外加exact标识，空path的重复路由也可以删除。修正后的路由代码如下：

<div className = "appBody">
  <Router basename={process.env.PUBLIC_URL}>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/About" element={<Home />}/>
      <Route path="/Games" element={<Home />} />
      <Route path="/Software" element={<Home />} />
      <Route path="/Art" element={<Home />} />
      <Route path="/Writing" element={<Home />} />
      <Route path="/Socials" element={<Socials />} />
    </Routes>
  </Router>
</div>

两处修正完成后，组件即可正常接收传入的props，路由也会按路径规则正常渲染对应页面，不会再出现访问根路径提前报错的问题。

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