javascript - 更新通过 React Router 中的 Link 传递的状态

Question

我有一个页面 - 第 1 页，其中包含指向第 2 页的链接。

<Link to={{ pathname:`campaign/${data.id}`, state: data }}> View more </Link>

我正在 Link 元素中将状态传递到新页面。在第 2 页中，我对传递的数据进行了一些更改。如何更新第 1 页上的更改？我需要使用 Redux 吗？

路由器看起来像这样

<Route path="/" exact component = {HomePage}/>
<Route path="/campaign/:id" exact component = {Campaign}/>

Answer 1

如果您需要同级组件来共享/修改同一状态，那么该状态需要存在于一个共同的祖先中:

class Parent extends React.Component {
  state = { data: ... }
  updateData = newData => this.setState({ data: newData })
  render() {
    return (
      <Router>
        <div>
          <Route path="/" exact 
            component={props => 
              <HomePage {...props} data={this.state.data} updateData={this.updateData} />
            } 
          />
          <Route path="/campaign/:id" exact 
            component={props => 
              <Campaign {...props} data={this.state.data} updateData={this.updateData} />
            }
          />
        </div>
      </Router>
    )
  }
}