React Router使用报错：Navbar.jsx无法读取undefined的Text属性

核心错误原因 #

报错Cannot read properties of undefined (reading 'Text')的本质是：Navbar组件未收到about属性，导致props.about为undefined，无法访问其Text子属性。同时你的App.jsx中React Router的写法不符合v6规范，会引发额外渲染问题。

分步修复 #

1. 修正React Router Route的写法 #

React Router v6要求Route的内容必须通过element属性传递，标签内部不能嵌套子组件（这是v5的废弃写法）。你的代码存在重复渲染组件的问题，修改如下：

// 修正后的App.jsx路由部分
<Router>
  <div className="container">
    <Routes>
      <Route path="/about" element={<About />} />
      <Route path="/" element={<TextForm showAlert={showAlert} heading="Enter The Text." mode={mode}/>} />
    </Routes>
  </div>
</Router>

2. 给Navbar组件传入about属性 #

在使用Navbar的位置（一般是App.jsx中），显式传入包含Text属性的about对象，示例：

// App.jsx中引入并使用Navbar的代码示例
import Navbar from './Navbar';

function App() {
  // 定义要传递的about数据
  const aboutData = {
    Text: "About"
  };

  // ...其他业务代码（比如showAlert、mode状态等）

  return (
    <>
      {/* 这里传入about属性 */}
      <Navbar about={aboutData} />
      <Router>
        {/* 路由代码同上 */}
      </Router>
    </>
  );
}

3. 可选：添加空值保护避免意外报错 #

如果无法保证about属性一定会被传入，可以在Navbar中增加空值检查，防止类似错误复发：

// Navbar.jsx中修改链接文本部分
<li className="nav-item">
  <Link className="nav-link" to="/about">
    {/* 用可选链操作符+默认值做保护 */}
    {props.about?.Text || "About"}
  </Link>
</li>

验证修复 #

完成修改后重启项目，检查：

• Chrome控制台是否还有报错
• 首页与About页面的切换功能是否正常
• Navbar中的About链接文本是否正确显示

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