How react router parent-son routing communicates

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);
Jun.20,2022

OK, write a method in Home, and then pass

    this.props.history.push({
        pathname : '/index/city',
        state : {
            func: func, //
            
        }
    })

or send it in Route

<Route 
    path={`${this.props.match.path}/city`} 
    render={props => <City {...props} func={this.func}
/>></Route>

if Home is not uninstalled, I don't think your code will uninstall either


No!

Menu