Question

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

如何实现这一目标？有什么方法可以编写触发警报然后激活链接的功能？

Answer 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

显示警报，然后转到reactjs中的路由

1 个答案: