How to use Redirect in the new react-router-dom of Reactjs?

0 votes

I am using the last version react-router module, named react-router-dom, that has become the default when developing web applications with React. I want to know how to make a redirection after a POST request. I have been making this code, but after the request, nothing happens. I review on the web, but all the data is about previous versions of the react router, and no with the last update.

Code:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'

import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';

class SignUpPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
      client: {
        userclient: '',
        clientname: '',
        clientbusinessname: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.processForm = this.processForm.bind(this);
    this.changeClient = this.changeClient.bind(this);
  }

  changeClient(event) {
    const field = event.target.name;
    const client = this.state.client;
    client[field] = event.target.value;

    this.setState({
      client });
  }

  async processForm(event) {
    event.preventDefault();

    const userclient = this.state.client.userclient;
    const clientname = this.state.client.clientname;
    const clientbusinessname = this.state.client.clientbusinessname;
    const password = this.state.client.password;
    const confirmPassword = this.state.client.confirmPassword;
    const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };

    axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });

        <Redirect to="/"/> // Here, nothings happens
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

  render() {
    return (
      <div className={styles.section}>
        <div className={styles.container}>
          <img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
          <SignUpForm 
            onSubmit={this.processForm}
            onChange={this.changeClient}
            errors={this.state.errors}
            client={this.state.client}
          />
          <Footer />
        </div>
      </div>
    );
  }
}

export default SignUpPage;
May 18 in Java-Script by kartik
• 11,890 points
31 views

1 answer to this question.

0 votes

Hello,

To navigate to another component you can use this.props.history.push('/main');

import React, { Component, Fragment } from 'react'

class Example extends Component {

  redirect() {
    this.props.history.push('/main')
  }

  render() {
    return (
      <Fragment>
        {this.redirect()}
      </Fragment>
    );
   }
 }

 export default Example
answered May 18 by Niroj
• 23,950 points

Related Questions In Java-Script

0 votes
1 answer

How to Scroll to the top of the page using JavaScript?

Hii @kartik, Using javascript <script> $("a[href='#top']").click(function() { ...READ MORE

answered Apr 2 in Java-Script by Niroj
• 23,950 points
15 views
0 votes
1 answer

How to get the directory of the currently running file?

Hello @kartik, This should do it: import ( ...READ MORE

answered May 5 in Java-Script by Niroj
• 23,950 points
26 views
0 votes
1 answer

How to do API call in react js?

Hello, Use fetch method inside componentDidMount to update state: componentDidMount(){ fetch('https://dey.me/api/') ...READ MORE

answered May 18 in Java-Script by Niroj
• 23,950 points
48 views
0 votes
1 answer

How to create dynamic href in react render function?

Hello @kartik, Use string concatenation: href={'/posts/' + post.id} The JSX ...READ MORE

answered May 18 in Java-Script by Niroj
• 23,950 points
42 views
0 votes
1 answer

Why it is necessary to refresh CSRF token per form request?

Hello, Generating a new CSRF token for each ...READ MORE

answered Mar 19 in Laravel by Niroj
• 23,950 points
199 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27 in PHP by Niroj
• 23,950 points
41 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27 in PHP by Niroj
• 23,950 points
44 views
0 votes
1 answer

How to retrieve or obtain data from the MySQL database using PHP?

Hello kartik,  Actually there are many functions that  ...READ MORE

answered Mar 27 in PHP by Niroj
• 23,950 points
36 views
0 votes
1 answer

How to use React Router with Laravel?

Hii Kartik, Create a route that maps everything ...READ MORE

answered Apr 29 in Java-Script by Niroj
• 23,950 points
97 views
0 votes
1 answer

How to get rid of underline for Link component of React Router?

Hello, If you are using styled-components, you could do ...READ MORE

answered May 18 in Java-Script by Niroj
• 23,950 points
40 views