反应路由器传递数据

Question

我正在为我的项目使用 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>
        );
    }
}

它有一个名为路径的状态。父组件将 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 按钮，将调用该函数并更改父组件中的状态。道具 LanguageChosen 也在子组件中更新。

但是，如果我刷新页面，按下按钮时 Child 中的属性 LanguageChosen 不会更新。它仅在我不刷新页面时有效。

我该如何解决。谢谢！

Answer 1

这段代码让我有点困惑，但是请记住，当您刷新页面时，所有 javascript 都会重新加载，因此您每次都在父级中将 languageChosen 硬编码为 English你刷新它重置为 English 的页面。您可以将该值存储在 localStorage 中并在刷新时检查它是否存在，或者将其添加到您的路由路径 child/id/:id/:language

然后，如果您使用的是 React Router v4，则在您的子组件中使用 this.props.match.params.language，它将呈现给定的语言。

Answer 2

你遇到这个问题的原因就在这里

const { languageChosen } = this.props.location.state

languageChose是从this.props.location设置的，location是在url更改为“/child/id/:id”时设置的，刷新页面后，父元素中的状态发生变化，但它不会改变location.state.And，我想你可以使用组件中的道具来解决问题。 1. 在route

中设置languageChosen属性

component={props => (
    <Child {...props} onChangeLanguage={this.onChangeLanguage} languageChosen={this.state.Path.state.languageChosen}/>
)}

2。在子组件中更改它

const { languageChosen } = this.props.languageChosen;

反应路由器传递数据

React-router Pass Data

javascript

frontend

reactjs

react-router

react-router-dom