Hey, I'm getting Navbar.jsx:33 Uncaught TypeError: Cannot read properties of undefined (reading 'Text') at Navbar in React router and props

Question

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!!

Answer 1

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>