显示警报，然后在 reactjs 中路由 [关闭]答案

【问题标题】：show alert and then go to route in reactjs [closed]显示警报，然后在 reactjs 中路由 [关闭]
【发布时间】：2020-01-18 04:28:04
【问题描述】：

我创建了一个 react 应用并实现了两条路由。
“/”上的页面显示欢迎消息，/pageone 显示其他页面。
我在主页上有按钮（“/”），它用链接包裹 to="/pageone"。
我想显示一个警报“Hi Welcome”，然后我只想路由到pageone 页面。

如何做到这一点？有没有办法写一个触发警报然后激活链接的函数？

【问题讨论】：

请提供代码或 sn-p 以在问题本身中重现问题。

标签： reactjs react-router-dom

【解决方案1】：

您可以定义一个名为 onClose 的函数并在路由之前实现您想要执行的操作，但请记住，在路由之后，如果您不将其挂载在 pageone 组件中，组件的状态将消失

import { Component } from 'react'
import { Link } from 'react-router-dom'

class App extends Component{
  constructor(props) {
    super(props)
    this.state = {
       visible: true
    }
  }
  onClose = () => {
    this.setState({ visible: false });
    window.alert('Welcome to Page One')
  }

  render() {
    return(
     <Link to='/pageone' onClick={() => onClose()}>Go To Page One</Link>
    )
  }

}

export default App

【讨论】：

你的答案很完美@onuritan。我想在单击后进行路由之前运行一个功能。有什么办法吗？实际上我真正想要的是在路由发生之前关闭侧边栏组件。我想在点击后运行我的 this.onClose 函数，只需要发生路由。请帮助我
如果某个条件没问题，你想要路由吗？否则不要路由那种情况？
我有一个函数 onClose = () => {this.setState({visible: false,});};我希望它在那之后运行，只是我想在点击时更改我的路线。
你能看一下扩展的解决方案吗，它应该使状态可见 false 然后警报，然后在最后路由
谢谢@onuriltan，因为你我今天学到了新东西