javascript - 当查询字符串改变时更新 react 组件

Question

我需要一个组件在另一个组件更改查询/搜索字符串时重新呈现。

要更改我正在使用 history.push() 的 url:

private updateURL(date: Date) {
    const url = `/?date=${formatDate(date)}`; // /?date=2019-01-01
    history.replaceState(
        {},
        `Dashboard for ${formatDate(date)}`,
        url
    );
}

在我的导航栏中，我想更新我的链接，以便它们可以在 URL 之间共享查询字符串。如果我使用 withRouter 这有效:

class Sidebar extends React.Component {
    public render(){
        return <Link to={`/anotherPage?${this.props.location.search}`}>Visit</Link>;
    }
}

export default withRouter(Sidebar);

如果我使用 Redirect 对象而不是 history.push()，侧边栏会更新，这很好。这是否意味着它将卸载整个 View ，呈现重定向，然后重新安装整个 View ？例如，如果这意味着卸载和重新安装复杂的 svg map ，那将是不可取的。

constructor(props){
  super(props);
  this.state = {
    redirect: null;
  }
}

private updateURL(date: Date){
  this.setState({
    redirect: `/?date=${formatDate(date)}`
  });
}

public render(){
  if (this.state.redirect){
    return <Redirect to={this.state.redirect} />;
  } else {
    // render dashboard, map, charts, etc.
  }
}

如果我不能或不想使用 <Redirect /> , 当查询字符串因 history.push 而改变时，是否有替代方法会导致侧边栏更新？

Answer 1

例如，您可以通过将 console.log 放在 componentDidMount 中轻松检查它，但考虑到 React 的工作原理，我相信它会像您怀疑的那样卸载/挂载。因此，更好的解决方案是使用 react-router 还提供的 history.replace() API:

private updateURL(date: Date){
  this.props.history.replace(`/?date=${formatDate(date)}`);
}