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'));

CodePudding user response：

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>

CodePudding user response：

Solution

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)

CodePudding user response：

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} />} />