problem description
should be the communication problem between the parent component and the child route < Route >: there is a child < Route > in the
Home component pointing to the city component. If you let the method in the child < Route > change the state of the Home component?
can it be done without a state management tool such as redux?
related codes
// Home
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";
import { fpost } from "../../assets/lib/fetch"
import api from "../../assets/utils/api"
import "./Home.scss"
import City from "../city/City"
class Home extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
searchDay: "2019-02-12",
showDay: "0212",
depCity: { //
name: "",
showName: "",
station: ""
},
desCity: { //
name: "",
showName: "",
station: ""
}
};
}
//
btnChoseDep = () => {
this.props.history.push("/index/city");
}
//
btnChoseDes = () => {
this.props.history.push({
pathname : "/index/city",
state : {
cname: this.state.depCity.name,
cid: this.state.depCity.id
}
})
}
render() {
return (
<div className="Home">
{/* */}
<section className="cityArea flex_box flex_align_center">
<dl className="depture flex_1">
<dt>/</dt>
<dd onClick={this.btnChoseDep}>{this.state.depCity.showName + this.state.depCity.station}</dd>
</dl>
<span className="exchange iconf color"></span>
<dl className="destination flex_1">
<dt className="r">/</dt>
<dd onClick={this.btnChoseDes} className="r">{this.state.desCity.showName + this.state.desCity.station}</dd>
</dl>
</section>
{/* City */}
<Route path={`${this.props.match.path}/city`} component={City}></Route>
</div>
);
}
}
export default withRouter(Home);