react router 4 passing params in Route

Question

export default class Root extends React.Component{

  constructor(props) {
    super(props);
  }

  dealsCallBack = (dealListFromHome)=>{
  console.log("deals from home"+dealListFromHome);
}
  render(){
    return(
      <div>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/mall/:id" component={MallDetail}/>
          <Route path="/home/:location" render={(props) => (<Home passDealsToRoute ={this.dealsCallBack} {...props}/>)} />
          <Route exact path="/about" component={About}/>
        </Switch>
        <Footer/>
      </div>
    );
  }
}

How do I access the passDealsToRoute from the component Home? this.props. passDealsToRoute(theList) is not working.

your requirement is the same as this question https://stackoverflow.com/questions/44255415/react-router-4-1-1-this-props-route-is-undefined/44255850#44255850 , only difference as Home component is being called at two differnet routes and the first one doesn't provide that props and hence can fail in that case. Try to provide a check before using — Shubham Khatri, Jun 16 '17 at 17:04
my version is same 4.1.1,but I'm not getting the props. passDealsToRoute ,and also this is a callback. — sreejith v s, Jun 16 '17 at 18:35
@ShubhamKhatri and that's why I use exact for to match the exact url (both with params and w/o params) — sreejith v s, Jun 20 '17 at 13:52

score 0 · Accepted Answer · answered Jun 16 '17 at 18:54

0

constructor(props) {
    super(props);
    this.dealsCallBack = this.dealsCallBack.bind(this);
  }

got the answer. this.dealsCallBack = this.dealsCallBack.bind(this); this line fixed the issue.

answered Jun 16 '17 at 18:54

sreejith v s

1,334
10
17

react router 4 passing params in Route

1 Answers1