How is a React component called with parameters via a route? - reactjs

Question

The RouteParamPage.tsx is a React component that can consume URL parameters via the router. It is working.
The call is like this:
<Route path={"/p2/:lastname"} component={RouteParamPage}/>
The ParamPage.tsx component has a parameter in the signature.
I can call these components without a router like this:
<ParamPage label={"with params V2"}/>
The question is, how can I call the ParamPage.tsx component in the Route?
That doesn't work:
<Route path={"/p1"} component={ParamPage label={"with params V2"}}/>
Does somebody has any idea?
----------------- RouteParamPage.tsx --------------
import React from 'react';
import { useParams } from 'react-router-dom';
interface RouteParams {
lastname: string
}
export default function RouteParamPage() {
const params = useParams<RouteParams>();
return (
<React.Fragment>
<h1>{params.lastname}</h1>
</React.Fragment>
)
}
----------------- ParamPage.tsx --------------
import React from 'react';
type childProps = {
label: string,
}
export default function ParamPage( data: childProps ) {
return (
<React.Fragment>
<h1>{ data.label }</h1>
</React.Fragment>
)
}
----------------- Main.tsx --------------
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Home from "./Home";
import ParamPage from "./ParamPage";
import RouteParamPage from "./RouteParamPage";
export default function Main() {
return (
<React.Fragment>
<ParamPage label={"with params V2"}/> {/*<<<<this works*/}
<Router>
<Switch>
<Route path={"/"} exact component={Home}/>
<Route path={"/p1"} component={ParamPage label={"with params V2"}}/> {/*<<< That doesn't work:*/}
<Route path={"/p2/:lastname"} component={RouteParamPage}/>
</Switch>
</Router>
</React.Fragment>
)
}

Answer 1

You should use render props to pass parameter to the component which is render by the Route component like this
<Route path="/p1" render={(routeProps) => {
return <ParamPage label={"with params V2"}} {...routeProps}/>
}} />
To learn more about check the React Render Props Documentation

Answer 2

For this case, there is a render prop which needs to be used instead of component.
The code will be modified to below
<Route
path={"/p1"}
render={(props) => <ParamPage {...props} label={"with params V2"} />}
/>
Hope it helps. Revert for any doubts/confusions.