ReactJS：如何在 XHR 之后在 react-router 中从一条路由重定向到另一条路由？ [复制]

Question

我被困住了。请求后我无法重定向我的用户。

有我的请求（在组件中）：

const onSubmit = (data) =>{ 
    const datafull = 
      {
      "title": data.title,
      "excerpt": "nonex5",
      "content": data.content,
      "location": data.location,
      "company_id": "75",
      "category_id": data.category_id,
      "date_start_at": data.date_start_at,
      "date_end_at": data.date_end_at,
      "link" : data.link,
      }
    console.log(datafull);
    axios({
      method: 'post',
      url: 'url',
      data: datafull,
    })
    .then(function (res) {
      {
       console.log('resolution',res.data);
       return <Redirect to="/company/news" />
      };
    })
    .catch(function (erreur) {
        console.log(erreur);
    });};
  const { register, handleSubmit, errors } = useForm();
  

有人有什么建议可以帮助我找到解决方案吗？

Answer 1

您可以使用路线道具中的历史记录。

import { useHistory } from "react-router-dom";

const history = useHistory();
history.replace("/company/news"); or history.push("/company/news");

希望对你有用

Answer 2

您可以使用历史挂钩从一条路线转到另一条路线

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

const YourComponent = () => {
    const history = useHistory(); 

    // trigger this method to go to news page
    function goToNews() {
        history.push('/company/news');
    }


}

或者你也可以使用 window 对象 -

window.location.replace("url") 
//or 
window.location.assign("url")

Answer 3

泰!!!问题解决了：

axios({
      method: 'post',
      url: 'url',
      data: datafull,
    })
    .then(function (res) {
      {
        console.log('resolution',res.data);
        return history.push("/company/news");
      };
    })
    .catch(function (erreur) {
        
        console.log(erreur);
        
    });};

谢谢谢谢！

Answer 4

试试这个解决方案：

import React, { useState } from "react";
import axios from "axios";
import { useForm } from "react-hook-form";
import { Redirect } from "react-router-dom";

function ResponseHandler() {
  const { register, handleSubmit, errors } = useForm();

  const [redirect, setRedirect] = useState(false);

  const onSubmit = (data) => {
    const datafull = {
      title: data.title,
      excerpt: "nonex5",
      content: data.content,
      location: data.location,
      company_id: "75",
      category_id: data.category_id,
      date_start_at: data.date_start_at,
      date_end_at: data.date_end_at,
      link: data.link,
    };

    console.log(datafull);
    axios({
      method: "post",
      url: "url",
      data: datafull,
    })
      .then(function (res) {
        console.log("resolution", res.data);
        setRedirect(true);
      })
      .catch(function (err) {
        console.log(err);
      });
  };

  if (redirect) return <Redirect to="/company/news" />;
  // default return goes beneath
}

如果有帮助，请告诉我。