redirect using react router

Question

I am using ReactJS and have a form (component) that needs to redirect to another component, if the post request is successful. I have just started using react router, so this is the way I am trying to redirect.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import NextComponent from '/NextComponent';
import axios from 'axios';

class CurrentComponent extends Component {

constructor() {
    super();
    this.state = {
        value: ''
        redirect: false
    };
}

handleSubmit() {
    axios.post('xxx/yyy', {
        xxx: yyy
    })
    .then(function() {
        console.log('Success');
        this.setState({redirect: true});
    })
    .catch(function() {
        console.log('Error');
    });
}

render() {
    return(
        <div>
         <form>
          <div className="form-group">
           <input type="name" placeholder="name" />
          </div>
          <div className="form-group">
          <button type="button" onClick={this.handleSubmit.bind(this)} >Submit</button>
          {this.state.redirect &&
           <Redirect to={{
            pathname: '/nextcomponent',
            state: {from: this.state.value}
            }} />
          }
       </div>
         <Router>
           <Route path="/nextcomponent" component={NextComponent} />
         </Router>
        </form>
       </div>
    );
 }
}

export default PresentComponent;

It is not redirecting and I have been trying to figure this out. I am sure there are better solutions available, but due to my lack of knowledge I am unsure of implementing it. Any help is appreciated. Thank you.

I think the issue is that you are adding a state prop to the redirect, but based on the docs the redirect does not have a state prop. reacttraining.com/react-router/web/api/Redirect — Chaim Friedman
– Chaim Friedman, Commented May 22, 2017 at 17:10
Yes thanks, I have changed most of the logic based of it, but because the examples are so concise. I am finding it difficult. — Annie
– Annie, Commented May 23, 2017 at 11:22

Arpit Aggarwal · Accepted Answer · 2017-05-23 17:52:36Z

1

Probably you are not getting the state after post call, try modifying the handleSubmit method as:

handleSubmit() {
    let _this = this;
    axios.post('xxx/yyy', {
        xxx: yyy
    })
    .then(function() {
        console.log('Success');
        _this.setState({redirect: true});
    })
    .catch(function() {
        console.log('Error');
    });
}

Update as per new code:

class ComponentOne extends Component {

    constructor() {
        super();
        this.UpdateRoute= this.UpdateRoute.bind(this);
        this.state = {
            value: ''
        };
        this.loggedin = false;
    }

    const UpdateRoute = () => (
        <Router>
        <Route exact path="/xyz" render={() => (
          loggedin ? (
            <ComponentTwo />
          ) : (
            <ComponentOne />
          )
        )}/>
        </Router>
    )

    handleSubmit() {
        let _this = this;
        axios.post('/xyz', {
            xxx: yyy,
        })
        .then(function(response) {
            _this.loggedin = true;
            _this.UpdateRoute();
        })
        .catch(function() {
            console.log('Error');
        });
    }

    render() {
        return(
              <div>
            <h1>Load First</h1>
            <button type="button" onClick={this.handleSubmit.bind(this)}>Submit</button>
              </div>
        );
    }
}

export default ComponentOne;

edited May 23, 2017 at 17:52

answered May 23, 2017 at 11:54

Arpit Aggarwal

29.5k16 gold badges97 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Annie Over a year ago

thanks, but with this method I was getting 2 components. I modified the code a bit.You can see it within this gist.github.com/anika-sharma/13c79cb40bd53c6e8f7afca634d9a5fb. But now on click the loggedin variable's value does not change.

Arpit Aggarwal Over a year ago

@Annie check my updated answer also try looking at similar implementation here - aggarwalarpit.wordpress.com/2017/05/15/handling-events-in-react

Annie Over a year ago

this.UpdateRoute= this.UpdateRoute.bind(this); gives an error cannot read property bind of undefined.

Arpit Aggarwal Over a year ago

@Annie check updated answer, UpdateRoute should be defined in a component itself.

Annie Over a year ago

Okay I have added it, but my server fails. I think defining a component within another component, causes this problem.

Nitin Tulswani · Accepted Answer · 2017-05-22 17:30:59Z

1

This worked for my use case not sure about you. Try this -

<Route exact path="/some_url" render={() => (
  submitted ? (
    <Redirect to="/profile"/>
  ) : (
    <HomePage/>
  )
)}/>

Modify your logic or encapsulate it into <Route /> like in this example.

answered May 22, 2017 at 17:30

Nitin Tulswani

3093 silver badges5 bronze badges

1 Comment

Annie Over a year ago

I tried this, it routes to the new path, but shows both the components.

Ken Gregory · Accepted Answer · 2017-05-22 22:54:28Z

1

If you're using react-router 4, history is available through context:

this.context.history.push('/some/Path');

So you'd modify your handleSubmit:

handleSubmit() {
    axios.post('xxx/yyy', {
        xxx: yyy
    })
    .then(function() {
        console.log('Success');
        this.context.history.push('/go/somewhere/else');
    })
    .catch(function() {
        console.log('Error');
    });
}

See this answer for other ways of altering history without conditional routing.

answered May 22, 2017 at 22:54

Ken Gregory

7,4201 gold badge42 silver badges45 bronze badges

Comments

Kalim M Vazir · Accepted Answer · 2017-05-23 11:08:25Z

0

If you are using React-router-dom, then please check below given link.

https://reacttraining.com/react-router/web/example/auth-workflow

answered May 23, 2017 at 11:08

Kalim M Vazir

1091 silver badge2 bronze badges

Comments

Amir Hoseinian · Accepted Answer · 2017-05-23 13:12:34Z

0

Redirect is an export of react-router not react-router-dom. Therefore, you need to import it like:

import { Redirect } from 'react-router'

Redirect doc

answered May 23, 2017 at 13:12

Amir Hoseinian

2,3622 gold badges24 silver badges27 bronze badges

Comments

Michiel · Accepted Answer · 2017-07-18 15:02:40Z

0

Using react-router 2.8

I used the hashHistory from react-router to achieve this

import { hashHistory } from 'react-router';

then where I want to redirect:

hashHistory.push('/go/somewhere/else');

edited Jul 18, 2017 at 15:02

answered Jul 18, 2017 at 14:53

Michiel

4,2803 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

redirect using react router

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related