ReactRouter communication between parent component and child component - reactjs

Question

My parent component:
class Main extends Component {
constructor(props) {
super(props);
this.state = {
docked: false,
open: false,
transitions: true,
touch: true,
shadow: true,
pullRight: false,
touchHandleWidth: 20,
dragToggleDistance: 30,
currentUser: {}
};
this.renderPropCheckbox = this.renderPropCheckbox.bind(this);
this.renderPropNumber = this.renderPropNumber.bind(this);
this.onSetOpen = this.onSetOpen.bind(this);
this.menuButtonClick = this.menuButtonClick.bind(this);
this.updateUserData = this.updateUserData.bind(this);
}
updateUserData(user){
this.setState({
currentUser: user
})
}
render() {
return (
<BrowserRouter>
<div style={styles.content}>
<div className="content">
<Switch>
<Route path="/login/:code/:state" component={Login} updateUserData = {this.updateUserData}/>
<Route path="/dashboard" component={Login}/>
</Switch>
</div>
</div>
</BrowserRouter>
)
}
}
My child (login) component:
class Login extends Component{
constructor(props) {
super(props);
this.state = {
linkedInUrl: ''
};
}
componentWillMount(){
const query = new URLSearchParams(this.props.location.search);
if(query.get('code') && query.get('state')){
const code = query.get('code');
axios.post(Globals.API + '/user/saveUser', {
code: code,
})
.then((response) => {
if(response.data.success == true){
this.props.updateUserData(response.data.user);
}
})
.catch((error) => {
console.log(error);
})
}
}
render() {
const { linkedInUrl } = this.state;
return (
<div className="panel center-block" style={styles.panel}>
<div className="text-center">
<img src="/images/logo.png" alt="logo" style={styles.logo}/>
</div>
<div className="panel-body">
<a href={linkedInUrl} className="btn btn-block btn-social btn-linkedin">
<span className="fa fa-linkedin"></span>
Sign in with LinkedIn
</a>
</div>
<div className="panel-footer">
</div>
</div>
)
}
I am trying to update the currentUser object from Main component when I get a response in Login component and to also be able to access currentUser object from within all child components of Main (basically from my entire app). But this.props is empty in Login component and I cannot do this.props.updateUserData(response.data.user); either. Can anyone tell me why please? Thank you all for your time!

Answer 1

Because you don't pass any props to Login component. So to get it working you shouldn't use component prop on Route component. Instead of it you should use render prop, which takes a function which returns a component or jsx doesnt matter. More about Route component you can find here.
So replace this route
<Route
path="/login/:code/:state"
component={Login}
updateUserData = {this.updateUserData}
/>
To something like this, using render prop:
<Route
path="/login/:code/:state"
render={() => <Login updateUserData={this.updateUserData} currentUser= {this.state.currentUser} />}
/>
Worked example
Here is more example how to pass props into Route components using react-router.
Hope it will help