ReactJS: How to redirect from one route to another in react-router after XHR?

Question

I'm stuck. I can't redirect my user after my request .

There is my request (in component):

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();

Do anyone have suggestion to help me to get to the solution?

score 0 · Answer 1 · answered Jul 02 '20 at 13:54

0

you can use the history that is in the route props.

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

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

I hope you find it useful

answered Jul 02 '20 at 13:54

Daymel

3
1

Thanks to you too ! That's work ! – Ludovic Argenty Jul 02 '20 at 14:07
Any time!!!!!!! – Daymel Jul 08 '20 at 20:52

score 0 · Answer 2 · answered Jul 02 '20 at 13:57

0

You can use the history hook to go from one route to another

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');
    }


}

Or you can use window object also -

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

answered Jul 02 '20 at 13:57

Dlucidone

1,091
9
23

Thanks that's work ! – Ludovic Argenty Jul 02 '20 at 14:07

score 0 · Answer 3 · answered Jul 02 '20 at 14:05

Ty !!! problem solved with :

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);
        
    });};

Thanks Thanks !

score 0 · Answer 4 · answered Jul 02 '20 at 14:06

Try out this solution:

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
}

Let me know if it helps.

Work too ! Thanks ! :D – Ludovic Argenty Jul 02 '20 at 14:09 — Ludovic Argenty, Jul 02 '20 at 14:09

ReactJS: How to redirect from one route to another in react-router after XHR?

4 Answers4