Hey, I'm getting Navbar.jsx:33 Uncaught TypeError: Cannot read properties of undefined (reading-CodePudding

My App.jsx:

<Router>
<div className="container">
          <Routes>
            <Route path="/about" element={<About />}> <About /> </Route>
            <Route path="/" element={<TextForm />}>
              <TextForm showAlert={showAlert} heading="Enter The Text." mode={mode}/>
            </Route>
          </Routes>
        </div>
      </Router>

My Navbar.jsx, I'm thrown an error at {props.about.Text}...:
<li className="nav-item">
              <Link className="nav-link active" aria-current="page" to="/">
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/about">
                {props.about.Text}
              </Link>
            </li>

I was trying to use react router to switch between my home page and about page components!! Now my chrome dev tools console is full of errors!!

CodePudding user response：

In App.js you use the Navbar component with the incorrect props.

<Navbar mode={mode} toggleMode={toggleMode} about={{text: "Your text here"}}/>

In Navbar, change object fields to lowercase.

<Link className="nav-link" to="/about">
  {props.about.text}
</Link>