在react中如何使用可重用组件作为React组件传递给react-router-dom组件prop？

// Navbar.js
import React from 'react';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
};

export default Navbar;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Navbar from './Navbar';

const App = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Navbar from './Navbar';

const App = () => {
  const extraProp = { someValue: 'example' };

  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home extraProp={extraProp} />} />
        <Route path="/about" element={<About extraProp={extraProp} />} />
        <Route path="/contact" element={<Contact extraProp={extraProp} />} />
      </Routes>
    </Router>
  );
};

export default App;