我在我的项目中使用 React。我也在使用 react-router-dom 库。但是，我对通过 react-router-dom 传递数据感到困惑。

这是父组件的代码：

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Path: {
                pathname: "/child/id/1",
                state: {
                    languageChosen: "English"
                }
            }
        };
        this.onChangeLanguage = this.onChangeLanguage.bind(this);
    }
    onChangeLanguage() {
        const { Path } = this.state
        Path.state.languageChosen = 'Spanish'
        this.setState({Path})

    }
    render() {
        return (
            <div>
              <NavLink to={this.state.Path}>ToChild</NavLink>
              <Route
                path={`/child/id/:id`}
                render={props => (
                  <Child {...props} onChangeLanguage={this.onChangeLanguage} />
                )}
              />
            </div>
        );
    }
}

它有一个名为 Path 的状态。父组件将函数 onChangeLanguage 传递给其子组件。

这是子组件：

class Child extends Component {
    onChange = () => {
        this.props.onChangeLanguage;
    };
    render() {
        const { languageChosen } = this.props.location.state;
        return (
             <div>
              {languageChosen === "English" ? "English" : "Spanish"}
              <button onClick={this.onChange}>Change Language</button>
            </div>
        );
    }
}

如果我单击子组件中的 Change Lanuguage 按钮，则会调用该函数并且父组件中的状态会发生变化。prop LanguageChosen 也会在子组件中更新。

但是，如果我刷新页面，按下按钮后子组件中的 prop LanguageChosen 不会更新。只有当我不刷新页面时它才有效。

我该如何解决这个问题？谢谢！