Question

每当组件卸载时，我都需要将URL保存在本地存储中：

componentWillUnmount(){
        console.log("componentWillUnmount will call here.");
        console.log("window.redirect.url",window.location.pathname);

        localStorage.setItem("prevUrl",window.location.pathname);
    }

在另一种情况下，如果存在单击锚标记的情况，则不会调用上述方法：

 <a href="/differentpage">differentpage </a>

我无法执行unmount方法。我们有什么方法可以执行卸载吗？

Answer 1

从SPA上下文重定向到另一个页面将导致您退出反应生命周期。这就像期望在点击刷新按钮时经历这个循环一样你可以做的是，设置这个锚标签的处理程序e.preventDefault()来停止默认行为然后用状态做你的东西，只有当你完成后，将窗口路径重定向到通过{提供的链接{1}}在这种情况下但请记住，在将窗口位置重定向到SPA之外的其他页面后，您将丢失任何状态更新代码示例：

e.target.href

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};



class App extends React.Component {

onClick = e => {
  e.preventDefault();
  // do whatever you want with the state, but keep inmind you will lose all the data once you redirect the window out of this context (consider persistent state with local storage?)
  window.location = e.target.href;
}

render(){
  return(
    <div style={styles}>
      <a href="https://google.com" onClick={this.onClick}>click!</a>
      <h2>Redirect me! {'\u2728'}</h2>
    </div>
  );
}

}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

你可以将方法绑定到你的标签然后在handle方法中创建一个日志，然后重定向到你的新路径

在锚标记点击反应后，组件将卸载不被调用

2 个答案: