如何给react-router-dom添加属性？

import { BrowserRouter as Router, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
  const extraProps = { customProp: 'value' };

  return (
    <Router>
      <Route
        path="/my-route"
        render={(routeProps) => <MyComponent {...routeProps} {...extraProps} />}
      />
    </Router>
  );
}

import { BrowserRouter as Router, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

function withExtraProps(Component, extraProps) {
  return (routeProps) => <Component {...routeProps} {...extraProps} />;
}

function App() {
  const extraProps = { customProp: 'value' };

  return (
    <Router>
      <Route
        path="/my-route"
        component={withExtraProps(MyComponent, extraProps)}
      />
    </Router>
  );
}

import { BrowserRouter as Router, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
  const extraProps = { customProp: 'value' };

  return (
    <Router>
      <Route
        path="/my路由"
        element={<MyComponent {...extraProps} />}
      />
    </Router>
  );
}

import { useRouteMatch, useParams } from 'react-router-dom';
import MyComponent from './MyComponent';

function MyRouteComponent() {
  const match = useRouteMatch();
  const params = useParams();
  const extraProps = { customProp: 'value' };

  return <MyComponent {...params} {...extraprops} />;
}