在reactjs中提交表单后重定向到另一个组件

Question

我有以下方法来处理表单提交-

handleSubmit(event) {
  event.preventDefault();
 
  axios.get('url').then(response => {
    if(response.data.issuccess){
      this.props.history.push("/SuccessComponent");
    }       
  });
}

它更改了地址栏中的 URL，但 UI 保持不变。

如何解决这个问题？

Answer 1

这个方法效果并不完美。
如果您使用的是react-router-dom包，您需要首先在根文件（主要是app.js）中设置 successCompoment 的路由。

import SuccessComponent from .....link to the file...

<Route path='/SuccessComponent' component={SuccessComponent} exact/>

应用这个就会起作用。 如果您没有定义组件的路由，则无法导航到期望呈现最初未定义的不同组件的 URL

Answer 2

您可以使用来自 react-router-dom 的默认 useNavigate() 钩子。

import { useNavigate } from 'react-router-dom';

const yourFunction = () => {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();

    axios.get('url').then(response => {
      if(response.data.issuccess){
        navigate("/success-component-page"); // *link
      }       
    });
  }
}