如何将道具传递给路由中的组件？

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

function App() {
  return (
    <Router>
      <Route path="/my-path" render={(props) => <MyComponent {...props} customProp="value" />} />
    </Router>
  );
}

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

function App() {
  return (
    <Router>
      <Route path="/my-path/:id" render={(props) => <MyComponent {...props} customProp={props.match.params.id} />} />
    </Router>
  );
}

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/my-path/:id" render={async (props) => {
          const data = await fetchData(props.match.params.id);
          return <MyComponent {...props} data={data} />;
        }} />
      </Switch>
    </Router>
  );
}