I'm using "react-router-dom": "^5.2.0".
I simply want to pass props to Child components Like this
note: this is pseudo-code:
<Route exact path="/databases/buyordersdata" component={BuyOrders param1={value1}} />
This is the React file:
class Databases extends Component {
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/databases/" component={Navigation} />
<Route exact path="/databases/makebuy" component={MakeBuy} />
<Route exact path="/databases/makesell" component={MakeSell} />
<Route exact path="/databases/buyordersdata" component={BuyOrders} />
<Route exact path="/databases/sellordersdata" component={SellOrders} />
<Route exact path="/databases/AllMyOrders" component={MyOrders} />
</Switch>
</BrowserRouter>
</div>
)
}
}
const element = <Databases />;
ReactDOM.render(element, document.getElementById('contents'));
You just do something like this: Instead of using the route component like that, you can use the Route component as a parent and the component itself as a child.
<Route exact path="/path">
<BuyOrders param1={value1} /> // Then pass the props like that
</Route>
In parent component
<Route exact path="/databases/buyordersdata" render={
(props) => <BuyOrders {...props} order_type={true}/>
}/>
then in Child component
class BuyOrders extends Component {
constructor(props){
super(props)
}
...
render() {
console.log(this.props.test)
You can easily pass props to a component in the component prop, which should contain JSX format:
<Route exact path="/databases/buyordersdata" component={<BuyOrders param1={value1} />} />